diff --git a/build.gradle.kts b/build.gradle.kts
index c0284dc04..4dc9c3203 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -38,7 +38,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 0377ac94a..7ff23bf98 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 1.9799477846042635 L0.0 501.0200522153957 L705.0 501.0200522153957 L705.0 1.9799477846042635 Z">
     </path>
     <g transform="translate(6.5 66.47994778460426 ) ">
@@ -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), (692.0, 428.0401044307915)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (692.0, 428.0401044307915)]">
         <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="692.0" height="428.0401044307915">
             </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 1.9799477846042635 L0.0 501.0200522153957 L705.0 501.0200522153957 L705.0 1.9799477846042635 Z" pointer-events="none">
     </path>
   </g>
-  <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 009cb501f..fbbe3d562 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 1.9799477846042635 L0.0 501.0200522153957 L705.0 501.0200522153957 L705.0 1.9799477846042635 Z">
     </path>
     <g transform="translate(6.5 66.47994778460426 ) ">
@@ -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), (692.0, 428.0401044307915)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (692.0, 428.0401044307915)]">
         <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="692.0" height="428.0401044307915">
             </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 1.9799477846042635 L0.0 501.0200522153957 L705.0 501.0200522153957 L705.0 1.9799477846042635 Z" pointer-events="none">
     </path>
   </g>
-  <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 e5aa13666..34c767471 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 5.385440135508929 L0.0 464.61455986449107 L705.0 464.61455986449107 L705.0 5.385440135508929 Z">
     </path>
     <g transform="translate(29.5 11.88544013550893 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.22911972898214)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.22911972898214)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="400.22911972898214">
             </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 5.385440135508929 L0.0 464.61455986449107 L705.0 464.61455986449107 L705.0 5.385440135508929 Z" pointer-events="none">
     </path>
   </g>
-  <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 92fae2132..cd7f047ee 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 5.385440135508929 L0.0 464.61455986449107 L705.0 464.61455986449107 L705.0 5.385440135508929 Z">
     </path>
     <g transform="translate(29.5 11.88544013550893 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.22911972898214)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.22911972898214)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="400.22911972898214">
             </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 5.385440135508929 L0.0 464.61455986449107 L705.0 464.61455986449107 L705.0 5.385440135508929 Z" pointer-events="none">
     </path>
   </g>
-  <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 6d20e7b24..ca77d4021 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z">
     </path>
     <g transform="translate(29.5 37.71176888090574 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </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 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z" pointer-events="none">
     </path>
   </g>
-  <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 0f27c8370..f0cb96b41 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z">
     </path>
     <g transform="translate(29.5 37.71176888090574 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </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 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z" pointer-events="none">
     </path>
   </g>
-  <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 0a67238ee..164176032 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 40a803690..24ee5acf3 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 277e7c4fb..66f7f585e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z">
     </path>
     <g transform="translate(98.00134490176401 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="510.0360992855356" height="411.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="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 4c7b362a6..a016c9e5d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z">
     </path>
     <g transform="translate(98.00134490176401 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="510.0360992855356" height="411.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="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 00d877ded..809017f3b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 4985ce476..aca75ed83 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 0976d1915..e17de33a1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z">
     </path>
     <g transform="translate(98.00134490176401 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="510.0360992855356" height="411.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="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 84ddec048..4d0477a77 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z">
     </path>
     <g transform="translate(98.00134490176401 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="510.0360992855356" height="411.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="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 9a09dad68..adb73cde6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -165,7 +165,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (72.01121880696743, 0.0), (596.9887811930325, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (72.01121880696743, 0.0), (596.9887811930325, 411.0)]">
         <g transform="translate(72.01121880696743 0.0 ) ">
           <g>
             <g>
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="72.01121880696743" y="0.0" width="596.9887811930325" height="411.0">
             </rect>
           </clipPath>
@@ -484,6 +484,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 ece165500..a3c204ae9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -258,7 +258,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (72.01121880696743, 0.0), (596.9887811930325, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (72.01121880696743, 0.0), (596.9887811930325, 411.0)]">
         <g transform="translate(72.01121880696743 0.0 ) ">
           <g>
             <g>
@@ -462,7 +462,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="72.01121880696743" y="0.0" width="596.9887811930325" height="411.0">
             </rect>
           </clipPath>
@@ -484,6 +484,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 f9626bb9a..7f676efbc 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 26.70828276349164 L0.0 443.29171723650836 L705.0 443.29171723650836 L705.0 26.70828276349164 Z">
     </path>
     <g transform="translate(29.5 33.20828276349164 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 357.5834344730167)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 357.5834344730167)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="357.5834344730167">
             </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 26.70828276349164 L0.0 443.29171723650836 L705.0 443.29171723650836 L705.0 26.70828276349164 Z" pointer-events="none">
     </path>
   </g>
-  <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 ecf12550a..49c86e28a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 26.70828276349164 L0.0 443.29171723650836 L705.0 443.29171723650836 L705.0 26.70828276349164 Z">
     </path>
     <g transform="translate(29.5 33.20828276349164 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 357.5834344730167)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 357.5834344730167)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="357.5834344730167">
             </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 26.70828276349164 L0.0 443.29171723650836 L705.0 443.29171723650836 L705.0 26.70828276349164 Z" pointer-events="none">
     </path>
   </g>
-  <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 721cbc3f2..61776a5b2 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 22.512631775920852 L0.0 447.48736822407915 L705.0 447.48736822407915 L705.0 22.512631775920852 Z">
     </path>
     <g transform="translate(29.5 29.012631775920852 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 365.9747364481583)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 365.9747364481583)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="365.9747364481583">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="365.9747364481583">
             </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 22.512631775920852 L0.0 447.48736822407915 L705.0 447.48736822407915 L705.0 22.512631775920852 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 f53056a17..132295054 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 22.512631775920852 L0.0 447.48736822407915 L705.0 447.48736822407915 L705.0 22.512631775920852 Z">
     </path>
     <g transform="translate(29.5 29.012631775920852 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 365.9747364481583)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 365.9747364481583)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="365.9747364481583">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="365.9747364481583">
             </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 22.512631775920852 L0.0 447.48736822407915 L705.0 447.48736822407915 L705.0 22.512631775920852 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 d86bd3ffa..6c6e17547 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z">
     </path>
     <g transform="translate(29.5 37.71176888090574 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </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 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 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 e173f1113..836086933 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z">
     </path>
     <g transform="translate(29.5 37.71176888090574 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </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 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 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 7a86efc68..b33c26e63 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z">
     </path>
     <g transform="translate(29.5 37.71176888090574 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </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 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 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 d6b24a439..047399dcc 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z">
     </path>
     <g transform="translate(29.5 37.71176888090574 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </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 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 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 2a4d844f8..9dfbba5d0 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z">
     </path>
     <g transform="translate(29.5 37.71176888090574 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </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 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 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 d1e52bf32..b0b013799 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z">
     </path>
     <g transform="translate(29.5 37.71176888090574 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </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 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 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 277e7c4fb..66f7f585e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z">
     </path>
     <g transform="translate(98.00134490176401 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="510.0360992855356" height="411.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="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 4c7b362a6..a016c9e5d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z">
     </path>
     <g transform="translate(98.00134490176401 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="510.0360992855356" height="411.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="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 748dc4002..42adfdd9a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z">
     </path>
     <g transform="translate(98.00134490176401 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="510.0360992855356" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="510.0360992855356" height="411.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="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 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 4e8f3c6b9..c7c4fd521 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 0.0 Z">
     </path>
     <g transform="translate(98.00134490176401 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (510.0360992855356, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="510.0360992855356" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="510.0360992855356" height="411.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="M68.50134490176401 0.0 L68.50134490176401 470.0 L636.498655098236 470.0 L636.498655098236 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 0f425e4ad..651c7b874 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g 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.0290918167102 0.0 L114.0290918167102 470.0 L590.9709081832898 470.0 L590.9709081832898 0.0 Z">
     </path>
     <g transform="translate(143.5290918167102 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (411.00000000017496, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (411.00000000017496, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="411.00000000017496" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="0.0" width="411.00000000017496" height="411.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.0290918167102 0.0 L114.0290918167102 470.0 L590.9709081832898 470.0 L590.9709081832898 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 2593bdf92..2e114623e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g 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.0290918167102 0.0 L114.0290918167102 470.0 L590.9709081832898 470.0 L590.9709081832898 0.0 Z">
     </path>
     <g transform="translate(143.5290918167102 6.5 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (411.00000000017496, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (411.00000000017496, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="411.00000000017496" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="0.0" width="411.00000000017496" height="411.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.0290918167102 0.0 L114.0290918167102 470.0 L590.9709081832898 470.0 L590.9709081832898 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 b0fd2a088..4fb69b296 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 dca77f735..40e5047e0 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -371,7 +371,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 6d20e7b24..ca77d4021 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z">
     </path>
     <g transform="translate(29.5 37.71176888090574 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </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 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z" pointer-events="none">
     </path>
   </g>
-  <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 0f27c8370..f0cb96b41 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z">
     </path>
     <g transform="translate(29.5 37.71176888090574 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 348.5764622381885)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="348.5764622381885">
             </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 31.211768880905737 L0.0 438.78823111909423 L705.0 438.78823111909423 L705.0 31.211768880905737 Z" pointer-events="none">
     </path>
   </g>
-  <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 ab755f52c..7fb346f52 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M108.0 0.0 L108.0 528.0 L597.0 528.0 L597.0 0.0 Z">
     </path>
     <g transform="translate(114.5 45.5 ) ">
@@ -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), (476.0, 476.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (476.0, 476.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="476.0" height="476.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="M108.0 0.0 L108.0 528.0 L597.0 528.0 L597.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 52b79477e..d6386751a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M108.0 0.0 L108.0 528.0 L597.0 528.0 L597.0 0.0 Z">
     </path>
     <g transform="translate(114.5 45.5 ) ">
@@ -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), (476.0, 476.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (476.0, 476.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="476.0" height="476.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="M108.0 0.0 L108.0 528.0 L597.0 528.0 L597.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 7cfe3d89c..9dcc47a9d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="343.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="343.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 afeb1dabe..9c6603a75 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="343.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="343.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 12f74f008..7284e0fc8 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="343.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 7eeb174b1..dce203c68 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -324,7 +324,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="343.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 6705d8175..301c886c9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="343.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="343.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 b3d548fe6..e2e58e706 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="343.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="343.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 e925da416..064f82be9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 343.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 343.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="343.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="343.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 c76296544..498f69fff 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 343.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 343.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="343.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="343.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 0e775766c..99d73276c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="343.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="343.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 6a0a1f51e..2fdc27cd5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 343.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="343.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="343.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 e70837d18..8fb0de2a7 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.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 701aff0cb..13484b091 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.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 3b87e7feb..f6b2604ed 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.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 91c512642..32dae5343 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 323.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 323.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="323.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="323.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="323.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 941bd1915..27e66d295 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 323.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 323.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="323.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="323.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="323.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 9127527b0..80c052db9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.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 fa8d2b4b7..f525f2bb6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.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 290dfdef2..531fada9f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -302,7 +302,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (577.3727572197857, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="577.3727572197857" height="411.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 8b8349ce3..1239f429e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 7a80d5c31..329cf730e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -245,7 +245,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 8a1fb2770..1eb27c57c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 15c1b4f3e..da41bad1d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 8a1fb2770..1eb27c57c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 15c1b4f3e..da41bad1d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 030c71d07..e2ec73b37 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 4ff5b8e73..21e13ee8e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 d11a16bf4..833315fdc 100644
--- a/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch.svg
+++ b/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch.svg
@@ -11,117 +11,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -141,117 +141,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx3 .plot-title {
+#_sample_helper_static_id_prefix_3 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx3 .plot-subtitle {
+#_sample_helper_static_id_prefix_3 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .plot-caption {
+#_sample_helper_static_id_prefix_3 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .hyperlink-element {
+#_sample_helper_static_id_prefix_3 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx3 .legend-title {
+#_sample_helper_static_id_prefix_3 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .legend-item {
+#_sample_helper_static_id_prefix_3 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-x {
+#_sample_helper_static_id_prefix_3 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-x {
+#_sample_helper_static_id_prefix_3 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-y {
+#_sample_helper_static_id_prefix_3 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-y {
+#_sample_helper_static_id_prefix_3 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -271,117 +271,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx6 .plot-title {
+#_sample_helper_static_id_prefix_6 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx6 .plot-subtitle {
+#_sample_helper_static_id_prefix_6 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .plot-caption {
+#_sample_helper_static_id_prefix_6 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .hyperlink-element {
+#_sample_helper_static_id_prefix_6 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx6 .legend-title {
+#_sample_helper_static_id_prefix_6 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .legend-item {
+#_sample_helper_static_id_prefix_6 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-title-x {
+#_sample_helper_static_id_prefix_6 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .axis-text-x {
+#_sample_helper_static_id_prefix_6 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-title-y {
+#_sample_helper_static_id_prefix_6 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .axis-text-y {
+#_sample_helper_static_id_prefix_6 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_6 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_6 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -391,7 +391,7 @@ font-size: 13.0px;
 
   
 </style>
-<g transform="translate(0.0 0.0)" id="xXxprefixXx0">
+<g transform="translate(0.0 0.0)" 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 300.0 L350.0 300.0 L350.0 0.0 Z">
     </path>
     <g transform="translate(29.5 26.5 ) ">
@@ -425,7 +425,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (278.9846933242504, 221.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (278.9846933242504, 221.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="278.9846933242504" height="221.0">
             </rect>
           </clipPath>
@@ -548,10 +548,10 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 300.0 L350.0 300.0 L350.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 
-<g transform="translate(350.0 0.0)" id="xXxprefixXx3">
+<g transform="translate(350.0 0.0)" id="_sample_helper_static_id_prefix_3">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 300.0 L350.0 300.0 L350.0 0.0 Z">
     </path>
     <g transform="translate(29.5 26.5 ) ">
@@ -585,7 +585,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (278.9846933242504, 221.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (278.9846933242504, 221.0)]">
         <g transform="translate(35.01530667574961 0.0 ) ">
           <g>
             <g>
@@ -597,7 +597,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="35.01530667574961" y="0.0" width="278.9846933242504" height="221.0">
             </rect>
           </clipPath>
@@ -708,10 +708,10 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 300.0 L350.0 300.0 L350.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx5">
+  <g id="_sample_helper_static_id_prefix_5">
   </g>
 
-<g transform="translate(0.0 300.0)" id="xXxprefixXx6">
+<g transform="translate(0.0 300.0)" id="_sample_helper_static_id_prefix_6">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 300.0 L700.0 300.0 L700.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -753,7 +753,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (628.9846933242504, 241.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (628.9846933242504, 241.0)]">
         <g transform="translate(35.01530667574961 0.0 ) ">
           <g>
             <g>
@@ -861,7 +861,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="35.01530667574961" y="0.0" width="628.9846933242504" height="241.0">
             </rect>
           </clipPath>
@@ -1003,7 +1003,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 300.0 L700.0 300.0 L700.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx8">
+  <g id="_sample_helper_static_id_prefix_8">
   </g>
 
 </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 5f4713149..6211b8cbf 100644
--- a/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch_dark.svg
+++ b/docs/images/guides/geoms/guideLinesCompareLinePathSegmentsPlotBunch_dark.svg
@@ -11,117 +11,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -141,117 +141,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx3 .plot-title {
+#_sample_helper_static_id_prefix_3 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx3 .plot-subtitle {
+#_sample_helper_static_id_prefix_3 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .plot-caption {
+#_sample_helper_static_id_prefix_3 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .hyperlink-element {
+#_sample_helper_static_id_prefix_3 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx3 .legend-title {
+#_sample_helper_static_id_prefix_3 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .legend-item {
+#_sample_helper_static_id_prefix_3 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-x {
+#_sample_helper_static_id_prefix_3 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-x {
+#_sample_helper_static_id_prefix_3 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-y {
+#_sample_helper_static_id_prefix_3 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-y {
+#_sample_helper_static_id_prefix_3 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -271,117 +271,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx6 .plot-title {
+#_sample_helper_static_id_prefix_6 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx6 .plot-subtitle {
+#_sample_helper_static_id_prefix_6 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .plot-caption {
+#_sample_helper_static_id_prefix_6 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .hyperlink-element {
+#_sample_helper_static_id_prefix_6 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx6 .legend-title {
+#_sample_helper_static_id_prefix_6 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .legend-item {
+#_sample_helper_static_id_prefix_6 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-title-x {
+#_sample_helper_static_id_prefix_6 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .axis-text-x {
+#_sample_helper_static_id_prefix_6 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-title-y {
+#_sample_helper_static_id_prefix_6 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .axis-text-y {
+#_sample_helper_static_id_prefix_6 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_6 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_6 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -391,7 +391,7 @@ font-size: 13.0px;
 
   
 </style>
-<g transform="translate(0.0 0.0)" id="xXxprefixXx0">
+<g transform="translate(0.0 0.0)" 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 300.0 L350.0 300.0 L350.0 0.0 Z">
     </path>
     <g transform="translate(29.5 26.5 ) ">
@@ -509,7 +509,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (278.9846933242504, 221.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (278.9846933242504, 221.0)]">
         <g transform="translate(35.01530667574961 0.0 ) ">
           <g>
             <g>
@@ -521,7 +521,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="35.01530667574961" y="0.0" width="278.9846933242504" height="221.0">
             </rect>
           </clipPath>
@@ -548,10 +548,10 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 300.0 L350.0 300.0 L350.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 
-<g transform="translate(350.0 0.0)" id="xXxprefixXx3">
+<g transform="translate(350.0 0.0)" id="_sample_helper_static_id_prefix_3">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 300.0 L350.0 300.0 L350.0 0.0 Z">
     </path>
     <g transform="translate(29.5 26.5 ) ">
@@ -669,7 +669,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (278.9846933242504, 221.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (278.9846933242504, 221.0)]">
         <g transform="translate(35.01530667574961 0.0 ) ">
           <g>
             <g>
@@ -681,7 +681,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="35.01530667574961" y="0.0" width="278.9846933242504" height="221.0">
             </rect>
           </clipPath>
@@ -708,10 +708,10 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 300.0 L350.0 300.0 L350.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx5">
+  <g id="_sample_helper_static_id_prefix_5">
   </g>
 
-<g transform="translate(0.0 300.0)" id="xXxprefixXx6">
+<g transform="translate(0.0 300.0)" id="_sample_helper_static_id_prefix_6">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 300.0 L700.0 300.0 L700.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -873,7 +873,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (628.9846933242504, 241.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (628.9846933242504, 241.0)]">
         <g transform="translate(35.01530667574961 0.0 ) ">
           <g>
             <g>
@@ -981,7 +981,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="35.01530667574961" y="0.0" width="628.9846933242504" height="241.0">
             </rect>
           </clipPath>
@@ -1003,7 +1003,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 300.0 L700.0 300.0 L700.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx8">
+  <g id="_sample_helper_static_id_prefix_8">
   </g>
 
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/geoms/guideLinesSmoothLinear.svg b/docs/images/guides/geoms/guideLinesSmoothLinear.svg
index 9929ea9eb..43d18afe4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 b9a93b78c..008a3d0f7 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 85072e9c2..184de0e34 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (576.03317968558, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (576.03317968558, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="576.03317968558" height="411.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 2d9022c5a..06d954024 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (576.03317968558, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (576.03317968558, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="576.03317968558" height="411.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 4c0d0d7ed..d4d95565e 100644
--- a/docs/images/guides/geoms/guidePieChartsInPlotGrid.svg
+++ b/docs/images/guides/geoms/guidePieChartsInPlotGrid.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="235.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(6.5 6.5 ) ">
@@ -152,7 +152,7 @@ font-size: 13.0px;
           <g transform="">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (0.0, 0.0), (229.7978972409507, 222.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (0.0, 0.0), (229.7978972409507, 222.0)]">
           <g transform="">
             <g>
               <g>
@@ -208,7 +208,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="229.7978972409507" height="222.0">
               </rect>
             </clipPath>
@@ -293,7 +293,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 235.0 L350.5 235.0 L350.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="350.5" height="235.0" x="354.5" y="0.0">
@@ -308,117 +308,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -427,7 +427,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(6.5 6.5 ) ">
@@ -445,7 +445,7 @@ font-size: 13.0px;
           <g transform="">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (0.0, 0.0), (229.7978972409507, 222.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (0.0, 0.0), (229.7978972409507, 222.0)]">
           <g transform="">
             <g>
               <g>
@@ -501,7 +501,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="229.7978972409507" height="222.0">
               </rect>
             </clipPath>
@@ -586,7 +586,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 235.0 L350.5 235.0 L350.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 79c4765dc..eb019789c 100644
--- a/docs/images/guides/geoms/guidePieChartsInPlotGrid_dark.svg
+++ b/docs/images/guides/geoms/guidePieChartsInPlotGrid_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="235.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(6.5 6.5 ) ">
@@ -152,7 +152,7 @@ font-size: 13.0px;
           <g transform="">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (0.0, 0.0), (229.7978972409507, 222.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (0.0, 0.0), (229.7978972409507, 222.0)]">
           <g transform="">
             <g>
               <g>
@@ -208,7 +208,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="229.7978972409507" height="222.0">
               </rect>
             </clipPath>
@@ -293,7 +293,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 235.0 L350.5 235.0 L350.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="350.5" height="235.0" x="354.5" y="0.0">
@@ -308,117 +308,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -427,7 +427,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(6.5 6.5 ) ">
@@ -445,7 +445,7 @@ font-size: 13.0px;
           <g transform="">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (0.0, 0.0), (229.7978972409507, 222.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (0.0, 0.0), (229.7978972409507, 222.0)]">
           <g transform="">
             <g>
               <g>
@@ -501,7 +501,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="229.7978972409507" height="222.0">
               </rect>
             </clipPath>
@@ -586,7 +586,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 235.0 L350.5 235.0 L350.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 d248a0123..8d6720c24 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (634.0484863613295, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (634.0484863613295, 457.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="634.0484863613295" height="457.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 cdeecad31..2466d1b94 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (634.0484863613295, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (634.0484863613295, 457.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="634.0484863613295" height="457.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 cb1e730fe..2a7dc7f8b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (569.7258838419363, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (569.7258838419363, 457.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="569.7258838419363" height="457.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 2e8aff13e..f55278c5e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (569.7258838419363, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (569.7258838419363, 457.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="569.7258838419363" height="457.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 15cf4faac..5a70e1b85 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 84010d93c..00105a7a7 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 e2d9ac331..34fb4db15 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 ed9a1f784..323ff4020 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -367,7 +367,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 0e72aeab3..a9ff9ec02 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="293.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 bc69ecbc5..f31dc7f97 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -265,7 +265,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="293.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 9d2a4aa15..538f75e61 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (587.2203190628235, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (587.2203190628235, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="587.2203190628235" height="293.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 845980323..fbef5f88f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -304,7 +304,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (587.2203190628235, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (587.2203190628235, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="587.2203190628235" height="293.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 01911ed4b..35de1abb9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (587.2203190628235, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (587.2203190628235, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="587.2203190628235" height="293.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 61da6ae62..f5b3f1b3f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -304,7 +304,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (587.2203190628235, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (587.2203190628235, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="587.2203190628235" height="293.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 6060179b6..ea3881c42 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
         <g transform="translate(53.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="53.92376780579295" y="0.0" width="615.076232194207" height="254.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 736393734..f0ec3f44b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -271,7 +271,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
         <g transform="translate(53.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="53.92376780579295" y="0.0" width="615.076232194207" height="254.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 e0f4f4de9..aa04d2cfc 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 254.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 254.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="254.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 da00a2f2a..3e1fd04f1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -271,7 +271,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 254.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 254.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="254.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 e0f4f4de9..aa04d2cfc 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 254.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 254.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="254.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 da00a2f2a..3e1fd04f1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -271,7 +271,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 254.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 254.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="254.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 ee9e4787c..bf26ea62b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
         <g transform="translate(53.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="53.92376780579295" y="0.0" width="615.076232194207" height="254.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 fde63909c..49fc4e203 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
         <g transform="translate(53.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="53.92376780579295" y="0.0" width="615.076232194207" height="254.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 6060179b6..ea3881c42 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
         <g transform="translate(53.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="53.92376780579295" y="0.0" width="615.076232194207" height="254.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 736393734..f0ec3f44b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -271,7 +271,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (53.92376780579295, 0.0), (615.076232194207, 254.0)]">
         <g transform="translate(53.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="53.92376780579295" y="0.0" width="615.076232194207" height="254.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 73f834dd8..23bd4a341 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 234.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 234.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="234.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="234.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="234.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 ca1af2330..20a92156e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -271,7 +271,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 234.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 234.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="234.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="234.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="234.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 eb628a29f..9a3f8ee9f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 26.5 ) ">
@@ -308,7 +308,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (670.0387890890636, 216.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (670.0387890890636, 216.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="670.0387890890636" height="216.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 4e3f0922c..59aaa584e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 26.5 ) ">
@@ -308,7 +308,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (670.0387890890636, 216.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (670.0387890890636, 216.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="670.0387890890636" height="216.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 f53e19ea2..f6b985f3d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="293.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 cec68e498..edeb14f1d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="293.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 7ac7f3043..2a6ec663f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="293.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 d038bfcd1..372077afb 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="293.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 8baab3897..1726d429c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 234.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 234.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="516.7840674755316" height="234.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 f62b7ab8d..9aa43d33c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 234.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 234.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="516.7840674755316" height="234.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 d292439c2..62e639311 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (401.5293458619997, 214.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (401.5293458619997, 214.0)]">
         <g transform="translate(21.961210910936405 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="21.961210910936405" y="0.0" width="401.5293458619997" height="214.0">
             </rect>
           </clipPath>
@@ -768,6 +768,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 87a754ef0..d3e2384a9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -242,7 +242,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (401.5293458619997, 214.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (401.5293458619997, 214.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -488,7 +488,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="401.5293458619997" height="214.0">
             </rect>
           </clipPath>
@@ -768,6 +768,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 e979787c9..b92479cca 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="293.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 94bacf564..acda606e8 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 293.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="293.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 c0962b18c..26d5111b6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (401.5293458619997, 214.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (401.5293458619997, 214.0)]">
         <g transform="translate(21.961210910936405 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="21.961210910936405" y="0.0" width="401.5293458619997" height="214.0">
             </rect>
           </clipPath>
@@ -768,6 +768,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 c98208bcf..42305691e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -242,7 +242,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (401.5293458619997, 214.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (401.5293458619997, 214.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -488,7 +488,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="401.5293458619997" height="214.0">
             </rect>
           </clipPath>
@@ -768,6 +768,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 73be328ef..a8557dee5 100644
--- a/docs/images/guides/layout/guideStylesAllPrepStyles.svg
+++ b/docs/images/guides/layout/guideStylesAllPrepStyles.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="799.9999999999999">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -247,7 +247,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 184.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -493,7 +493,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="390.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -520,7 +520,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="0.0">
@@ -535,117 +535,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -654,7 +654,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -791,7 +791,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1037,7 +1037,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -1066,7 +1066,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="267.99999999999994">
@@ -1081,117 +1081,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1200,7 +1200,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1303,7 +1303,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1549,7 +1549,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -1576,7 +1576,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="267.99999999999994">
@@ -1591,117 +1591,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1710,7 +1710,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1847,7 +1847,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2093,7 +2093,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -2122,7 +2122,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="535.9999999999999">
@@ -2137,117 +2137,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -2256,7 +2256,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -2373,7 +2373,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 188.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2619,7 +2619,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="21.961210910936405" y="0.0" width="390.0387890890636" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -2646,7 +2646,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="535.9999999999999">
@@ -2661,117 +2661,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -2780,7 +2780,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -2921,7 +2921,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -3167,7 +3167,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -3196,7 +3196,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 263.99999999999994 L448.0 263.99999999999994 L448.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 0df87728f..4f9e382b9 100644
--- a/docs/images/guides/layout/guideStylesAllPrepStyles_dark.svg
+++ b/docs/images/guides/layout/guideStylesAllPrepStyles_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="799.9999999999999">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -247,7 +247,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 184.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -493,7 +493,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="390.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -520,7 +520,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="0.0">
@@ -535,117 +535,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -654,7 +654,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -791,7 +791,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1037,7 +1037,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -1066,7 +1066,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="267.99999999999994">
@@ -1081,117 +1081,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1200,7 +1200,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1303,7 +1303,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1549,7 +1549,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -1576,7 +1576,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="267.99999999999994">
@@ -1591,117 +1591,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1710,7 +1710,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1847,7 +1847,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2093,7 +2093,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -2122,7 +2122,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="535.9999999999999">
@@ -2137,117 +2137,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -2256,7 +2256,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -2373,7 +2373,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 188.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2619,7 +2619,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="21.961210910936405" y="0.0" width="390.0387890890636" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -2646,7 +2646,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="535.9999999999999">
@@ -2661,117 +2661,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -2780,7 +2780,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -2921,7 +2921,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -3167,7 +3167,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -3196,7 +3196,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 263.99999999999994 L448.0 263.99999999999994 L448.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 b70431e5a..581f777af 100644
--- a/docs/images/guides/layout/guideStylesAxisTooltip.svg
+++ b/docs/images/guides/layout/guideStylesAxisTooltip.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -283,7 +283,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -529,7 +529,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -556,7 +556,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -571,117 +571,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -690,7 +690,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -839,7 +839,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1085,7 +1085,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -1112,7 +1112,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 400.0 L448.0 400.0 L448.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 c3ddbe1fc..8d0d0f018 100644
--- a/docs/images/guides/layout/guideStylesAxisTooltip_dark.svg
+++ b/docs/images/guides/layout/guideStylesAxisTooltip_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -283,7 +283,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -529,7 +529,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -556,7 +556,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -571,117 +571,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -690,7 +690,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -839,7 +839,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1085,7 +1085,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -1112,7 +1112,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 400.0 L448.0 400.0 L448.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 6376a2686..fda3813f0 100644
--- a/docs/images/guides/layout/guideStylesBackgroundPanel.svg
+++ b/docs/images/guides/layout/guideStylesBackgroundPanel.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -283,7 +283,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -529,7 +529,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -556,7 +556,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -571,117 +571,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -690,7 +690,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -841,7 +841,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1087,7 +1087,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -1116,7 +1116,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 400.0 L448.0 400.0 L448.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 d209eb422..7bd4a7ea8 100644
--- a/docs/images/guides/layout/guideStylesBackgroundPanel_dark.svg
+++ b/docs/images/guides/layout/guideStylesBackgroundPanel_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -283,7 +283,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -529,7 +529,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -556,7 +556,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -571,117 +571,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -690,7 +690,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -841,7 +841,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1087,7 +1087,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -1116,7 +1116,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 400.0 L448.0 400.0 L448.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 2c3c17951..8c1351548 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (581.1066699949249, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (581.1066699949249, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="581.1066699949249" height="411.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 e7b87297b..5f6c45598 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (581.1066699949249, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (581.1066699949249, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="581.1066699949249" height="411.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 004eeacd2..6be7de2c5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.0 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (288.04363772519656, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (288.04363772519656, 389.0)]">
         <g transform="translate(21.961210910936405 22.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="21.961210910936405" y="22.0" width="288.04363772519656" height="389.0">
             </rect>
           </clipPath>
@@ -363,7 +363,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (320.004848636133, 22.0), (288.04363772519656, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (320.004848636133, 22.0), (288.04363772519656, 389.0)]">
         <g transform="translate(320.004848636133 22.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="320.004848636133" y="22.0" width="288.04363772519656" height="389.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="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 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 397b07aa1..886d795c3 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.0 6.5 ) ">
@@ -294,7 +294,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (288.04363772519656, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (288.04363772519656, 389.0)]">
         <g transform="translate(21.961210910936405 22.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="21.961210910936405" y="22.0" width="288.04363772519656" height="389.0">
             </rect>
           </clipPath>
@@ -414,7 +414,7 @@ font-size: 13.0px;
         <g transform="translate(320.004848636133 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (320.004848636133, 22.0), (288.04363772519656, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (320.004848636133, 22.0), (288.04363772519656, 389.0)]">
         <g transform="translate(320.004848636133 22.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="320.004848636133" y="22.0" width="288.04363772519656" height="389.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="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 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 d381d8647..e4a05792d 100644
--- a/docs/images/guides/layout/guideStylesBlankAxis.svg
+++ b/docs/images/guides/layout/guideStylesBlankAxis.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -283,7 +283,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -529,7 +529,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -556,7 +556,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -571,117 +571,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -690,7 +690,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -837,7 +837,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1083,7 +1083,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -1110,7 +1110,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 400.0 L448.0 400.0 L448.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 a3cc4d2df..ddf68915b 100644
--- a/docs/images/guides/layout/guideStylesBlankAxis_dark.svg
+++ b/docs/images/guides/layout/guideStylesBlankAxis_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -283,7 +283,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -529,7 +529,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -556,7 +556,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -571,117 +571,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -690,7 +690,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -837,7 +837,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1083,7 +1083,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -1110,7 +1110,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 400.0 L448.0 400.0 L448.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 21eafbce8..cc10b6752 100644
--- a/docs/images/guides/layout/guideStylesConfigureBackgroundGrid.svg
+++ b/docs/images/guides/layout/guideStylesConfigureBackgroundGrid.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -340,7 +340,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (320.10666999492486, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (320.10666999492486, 321.0)]">
           <g transform="translate(33.94181636640461 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="33.94181636640461" y="0.0" width="320.10666999492486" height="321.0">
               </rect>
             </clipPath>
@@ -485,7 +485,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -500,117 +500,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #2c7fb8;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -619,7 +619,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -825,7 +825,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (320.10666999492486, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (320.10666999492486, 321.0)]">
           <g transform="translate(33.94181636640461 0.0 ) ">
             <g>
               <g>
@@ -843,7 +843,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="33.94181636640461" y="0.0" width="320.10666999492486" height="321.0">
               </rect>
             </clipPath>
@@ -970,7 +970,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 400.0 L448.0 400.0 L448.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 dbfe3c59b..2642d411e 100644
--- a/docs/images/guides/layout/guideStylesConfigureBackgroundGrid_dark.svg
+++ b/docs/images/guides/layout/guideStylesConfigureBackgroundGrid_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -340,7 +340,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (320.10666999492486, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (320.10666999492486, 321.0)]">
           <g transform="translate(33.94181636640461 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="33.94181636640461" y="0.0" width="320.10666999492486" height="321.0">
               </rect>
             </clipPath>
@@ -485,7 +485,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -500,117 +500,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-tooltip-text-y {
+#_sample_helper_static_id_prefix_6 .axis-tooltip-text-y {
 fill: #2c7fb8;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -619,7 +619,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -825,7 +825,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (320.10666999492486, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (320.10666999492486, 321.0)]">
           <g transform="translate(33.94181636640461 0.0 ) ">
             <g>
               <g>
@@ -843,7 +843,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="33.94181636640461" y="0.0" width="320.10666999492486" height="321.0">
               </rect>
             </clipPath>
@@ -970,7 +970,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 400.0 L448.0 400.0 L448.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 6dc39f183..95ea3bbec 100644
--- a/docs/images/guides/layout/guideStylesConfigureGridLine.svg
+++ b/docs/images/guides/layout/guideStylesConfigureGridLine.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -283,7 +283,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -529,7 +529,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -556,7 +556,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -571,117 +571,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -690,7 +690,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -839,7 +839,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1085,7 +1085,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -1112,7 +1112,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 400.0 L448.0 400.0 L448.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 ee27096f2..f143be1eb 100644
--- a/docs/images/guides/layout/guideStylesConfigureGridLine_dark.svg
+++ b/docs/images/guides/layout/guideStylesConfigureGridLine_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -283,7 +283,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -529,7 +529,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -556,7 +556,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -571,117 +571,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -690,7 +690,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -839,7 +839,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1085,7 +1085,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -1112,7 +1112,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 400.0 L448.0 400.0 L448.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 f89d9c088..5b02d3584 100644
--- a/docs/images/guides/layout/guideStylesCoordFlip.svg
+++ b/docs/images/guides/layout/guideStylesCoordFlip.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="799.9999999999999">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -168,7 +168,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -192,7 +192,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -393,7 +393,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="0.0">
@@ -408,117 +408,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -527,7 +527,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -647,7 +647,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -671,7 +671,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -786,7 +786,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="267.99999999999994">
@@ -801,117 +801,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -920,7 +920,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1040,7 +1040,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -1064,7 +1064,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -1179,7 +1179,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="267.99999999999994">
@@ -1194,117 +1194,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1313,7 +1313,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1433,7 +1433,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -1457,7 +1457,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -1584,7 +1584,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="535.9999999999999">
@@ -1599,117 +1599,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1718,7 +1718,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1838,7 +1838,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -1862,7 +1862,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -1977,7 +1977,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="535.9999999999999">
@@ -1992,117 +1992,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -2111,7 +2111,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -2231,7 +2231,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -2255,7 +2255,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -2370,7 +2370,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 263.99999999999994 L448.0 263.99999999999994 L448.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 30e9bce07..f4b8d3e3f 100644
--- a/docs/images/guides/layout/guideStylesCoordFlip_dark.svg
+++ b/docs/images/guides/layout/guideStylesCoordFlip_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="799.9999999999999">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -254,7 +254,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -278,7 +278,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -393,7 +393,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="0.0">
@@ -408,117 +408,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -527,7 +527,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -647,7 +647,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -671,7 +671,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -786,7 +786,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="267.99999999999994">
@@ -801,117 +801,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -920,7 +920,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1040,7 +1040,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -1064,7 +1064,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -1179,7 +1179,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="267.99999999999994">
@@ -1194,117 +1194,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1313,7 +1313,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1433,7 +1433,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -1457,7 +1457,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -1584,7 +1584,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="535.9999999999999">
@@ -1599,117 +1599,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1718,7 +1718,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1838,7 +1838,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -1862,7 +1862,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -1977,7 +1977,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="535.9999999999999">
@@ -1992,117 +1992,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -2111,7 +2111,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -2231,7 +2231,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (17.9806054554682, 0.0), (336.0678809058613, 188.99999999999994)]">
           <g transform="translate(17.9806054554682 0.0 ) ">
             <g>
               <g>
@@ -2255,7 +2255,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="17.9806054554682" y="0.0" width="336.0678809058613" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -2370,7 +2370,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 263.99999999999994 L448.0 263.99999999999994 L448.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 ecce49be9..9eda34663 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="391.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 9ebd005b8..0258e40ba 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="391.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 1b65a7bb5..5616bdd5a 100644
--- a/docs/images/guides/layout/guideStylesOnTopXAxis.svg
+++ b/docs/images/guides/layout/guideStylesOnTopXAxis.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -290,7 +290,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 321.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -308,7 +308,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="324.10666999492486" height="321.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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -664,7 +664,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 321.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -682,7 +682,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="324.10666999492486" height="321.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 400.0 L448.0 400.0 L448.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 67658eb09..cba7ffb66 100644
--- a/docs/images/guides/layout/guideStylesOnTopXAxis_dark.svg
+++ b/docs/images/guides/layout/guideStylesOnTopXAxis_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -290,7 +290,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 321.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -308,7 +308,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="324.10666999492486" height="321.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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -664,7 +664,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 321.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -682,7 +682,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="324.10666999492486" height="321.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 400.0 L448.0 400.0 L448.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 116b073c2..d2b02e72e 100644
--- a/docs/images/guides/layout/guideStylesOrangeCustomStyle.svg
+++ b/docs/images/guides/layout/guideStylesOrangeCustomStyle.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 399.5 L447.5 399.5 L447.5 0.5 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -301,7 +301,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (28.961210910936405, 0.0), (383.0387890890636, 318.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (28.961210910936405, 0.0), (383.0387890890636, 318.0)]">
           <g transform="translate(28.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="28.961210910936405" y="0.0" width="383.0387890890636" height="318.0">
               </rect>
             </clipPath>
@@ -576,7 +576,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 399.5 L447.5 399.5 L447.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -591,117 +591,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -710,7 +710,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 399.5 L447.5 399.5 L447.5 0.5 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -831,7 +831,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (36.94181636640461, 0.0), (375.0581836335954, 278.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (36.94181636640461, 0.0), (375.0581836335954, 278.0)]">
           <g transform="translate(36.94181636640461 0.0 ) ">
             <g>
               <g>
@@ -849,7 +849,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="36.94181636640461" y="0.0" width="375.0581836335954" height="278.0">
               </rect>
             </clipPath>
@@ -976,7 +976,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 399.5 L447.5 399.5 L447.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 6a0b065df..e0221502b 100644
--- a/docs/images/guides/layout/guideStylesOrangeCustomStyle_dark.svg
+++ b/docs/images/guides/layout/guideStylesOrangeCustomStyle_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 399.5 L447.5 399.5 L447.5 0.5 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -301,7 +301,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (28.961210910936405, 0.0), (383.0387890890636, 318.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (28.961210910936405, 0.0), (383.0387890890636, 318.0)]">
           <g transform="translate(28.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="28.961210910936405" y="0.0" width="383.0387890890636" height="318.0">
               </rect>
             </clipPath>
@@ -576,7 +576,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 399.5 L447.5 399.5 L447.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -591,117 +591,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -710,7 +710,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 399.5 L447.5 399.5 L447.5 0.5 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -831,7 +831,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (36.94181636640461, 0.0), (375.0581836335954, 278.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (36.94181636640461, 0.0), (375.0581836335954, 278.0)]">
           <g transform="translate(36.94181636640461 0.0 ) ">
             <g>
               <g>
@@ -849,7 +849,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="36.94181636640461" y="0.0" width="375.0581836335954" height="278.0">
               </rect>
             </clipPath>
@@ -976,7 +976,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 399.5 L447.5 399.5 L447.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 6b6b55b35..85fb01bc4 100644
--- a/docs/images/guides/layout/guideStylesPanelGrid.svg
+++ b/docs/images/guides/layout/guideStylesPanelGrid.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="600.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -227,7 +227,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -245,7 +245,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="324.10666999492486" height="219.0">
               </rect>
             </clipPath>
@@ -360,7 +360,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="452.0" y="0.0">
@@ -375,117 +375,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -494,7 +494,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -607,7 +607,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 219.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -853,7 +853,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="390.0387890890636" height="219.0">
               </rect>
             </clipPath>
@@ -880,7 +880,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="0.0" y="302.0">
@@ -895,117 +895,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1014,7 +1014,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 42.5 ) ">
@@ -1145,7 +1145,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 203.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 203.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1391,7 +1391,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="390.0387890890636" height="203.0">
               </rect>
             </clipPath>
@@ -1421,7 +1421,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="452.0" y="302.0">
@@ -1436,117 +1436,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1555,7 +1555,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 58.5 ) ">
@@ -1664,7 +1664,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 187.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 187.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1682,7 +1682,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="29.941816366404606" y="0.0" width="324.10666999492486" height="187.0">
               </rect>
             </clipPath>
@@ -1803,7 +1803,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 298.0 L448.0 298.0 L448.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 ee0e1ba8b..82012b727 100644
--- a/docs/images/guides/layout/guideStylesPanelGrid_dark.svg
+++ b/docs/images/guides/layout/guideStylesPanelGrid_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="600.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -227,7 +227,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -245,7 +245,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="324.10666999492486" height="219.0">
               </rect>
             </clipPath>
@@ -360,7 +360,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="452.0" y="0.0">
@@ -375,117 +375,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -494,7 +494,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -607,7 +607,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 219.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -853,7 +853,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="390.0387890890636" height="219.0">
               </rect>
             </clipPath>
@@ -880,7 +880,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="0.0" y="302.0">
@@ -895,117 +895,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1014,7 +1014,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 42.5 ) ">
@@ -1145,7 +1145,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 203.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 203.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1391,7 +1391,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="390.0387890890636" height="203.0">
               </rect>
             </clipPath>
@@ -1421,7 +1421,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="452.0" y="302.0">
@@ -1436,117 +1436,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1555,7 +1555,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 58.5 ) ">
@@ -1664,7 +1664,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 187.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 187.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1682,7 +1682,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="29.941816366404606" y="0.0" width="324.10666999492486" height="187.0">
               </rect>
             </clipPath>
@@ -1803,7 +1803,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 298.0 L448.0 298.0 L448.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 56e154599..af1e75174 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 de2bd3d8b..bf1f0d46f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 f4bee77a3..4c7a28c4a 100644
--- a/docs/images/guides/layout/guideStylesStripBackground.svg
+++ b/docs/images/guides/layout/guideStylesStripBackground.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="600.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -284,7 +284,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (157.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (157.54363772519653, 197.0)]">
           <g transform="translate(25.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -298,7 +298,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.961210910936405" y="22.0" width="157.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -418,7 +418,7 @@ font-size: 13.0px;
           <g transform="translate(193.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (193.50484863613295, 22.0), (157.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (193.50484863613295, 22.0), (157.54363772519653, 197.0)]">
           <g transform="translate(193.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -436,7 +436,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx3">
+            <clipPath id="_sample_helper_static_id_prefix_3">
               <rect x="193.50484863613295" y="22.0" width="157.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -570,7 +570,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="452.0" y="0.0">
@@ -585,117 +585,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -704,7 +704,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -824,7 +824,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -838,7 +838,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx6">
+            <clipPath id="_sample_helper_static_id_prefix_6">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -936,7 +936,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -954,7 +954,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx7">
+            <clipPath id="_sample_helper_static_id_prefix_7">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1076,7 +1076,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="0.0" y="302.0">
@@ -1091,117 +1091,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1210,7 +1210,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -1330,7 +1330,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -1344,7 +1344,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx10">
+            <clipPath id="_sample_helper_static_id_prefix_10">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1440,7 +1440,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -1458,7 +1458,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1578,7 +1578,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="452.0" y="302.0">
@@ -1593,117 +1593,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1712,7 +1712,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1832,7 +1832,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (161.04363772519653, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (161.04363772519653, 219.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1846,7 +1846,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="21.961210910936405" y="0.0" width="161.04363772519653" height="219.0">
               </rect>
             </clipPath>
@@ -1937,7 +1937,7 @@ font-size: 13.0px;
           <g transform="translate(193.00484863613295 0.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (193.00484863613295, 0.0), (161.04363772519653, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (193.00484863613295, 0.0), (161.04363772519653, 219.0)]">
           <g transform="translate(193.00484863613295 0.0 ) ">
             <g>
               <g>
@@ -1955,7 +1955,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx15">
+            <clipPath id="_sample_helper_static_id_prefix_15">
               <rect x="193.00484863613295" y="0.0" width="161.04363772519653" height="219.0">
               </rect>
             </clipPath>
@@ -2070,7 +2070,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 298.0 L448.0 298.0 L448.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 75ea0eccf..052b5d367 100644
--- a/docs/images/guides/layout/guideStylesStripBackground_dark.svg
+++ b/docs/images/guides/layout/guideStylesStripBackground_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="600.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -284,7 +284,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (157.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (157.54363772519653, 197.0)]">
           <g transform="translate(25.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -298,7 +298,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.961210910936405" y="22.0" width="157.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -418,7 +418,7 @@ font-size: 13.0px;
           <g transform="translate(193.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (193.50484863613295, 22.0), (157.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (193.50484863613295, 22.0), (157.54363772519653, 197.0)]">
           <g transform="translate(193.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -436,7 +436,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx3">
+            <clipPath id="_sample_helper_static_id_prefix_3">
               <rect x="193.50484863613295" y="22.0" width="157.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -570,7 +570,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="452.0" y="0.0">
@@ -585,117 +585,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -704,7 +704,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -824,7 +824,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -838,7 +838,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx6">
+            <clipPath id="_sample_helper_static_id_prefix_6">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -936,7 +936,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -954,7 +954,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx7">
+            <clipPath id="_sample_helper_static_id_prefix_7">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1076,7 +1076,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="0.0" y="302.0">
@@ -1091,117 +1091,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1210,7 +1210,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -1330,7 +1330,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -1344,7 +1344,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx10">
+            <clipPath id="_sample_helper_static_id_prefix_10">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1440,7 +1440,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -1458,7 +1458,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1578,7 +1578,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="452.0" y="302.0">
@@ -1593,117 +1593,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1712,7 +1712,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1832,7 +1832,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (161.04363772519653, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (161.04363772519653, 219.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1846,7 +1846,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="21.961210910936405" y="0.0" width="161.04363772519653" height="219.0">
               </rect>
             </clipPath>
@@ -1937,7 +1937,7 @@ font-size: 13.0px;
           <g transform="translate(193.00484863613295 0.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (193.00484863613295, 0.0), (161.04363772519653, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (193.00484863613295, 0.0), (161.04363772519653, 219.0)]">
           <g transform="translate(193.00484863613295 0.0 ) ">
             <g>
               <g>
@@ -1955,7 +1955,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx15">
+            <clipPath id="_sample_helper_static_id_prefix_15">
               <rect x="193.00484863613295" y="0.0" width="161.04363772519653" height="219.0">
               </rect>
             </clipPath>
@@ -2070,7 +2070,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 298.0 L448.0 298.0 L448.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 53582c717..e0ff2d33c 100644
--- a/docs/images/guides/layout/guideStylesTextLegendStrip.svg
+++ b/docs/images/guides/layout/guideStylesTextLegendStrip.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="600.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -254,7 +254,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -268,7 +268,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -364,7 +364,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -382,7 +382,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx3">
+            <clipPath id="_sample_helper_static_id_prefix_3">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -502,7 +502,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="452.0" y="0.0">
@@ -517,117 +517,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -636,7 +636,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -756,7 +756,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -770,7 +770,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx6">
+            <clipPath id="_sample_helper_static_id_prefix_6">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -866,7 +866,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -884,7 +884,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx7">
+            <clipPath id="_sample_helper_static_id_prefix_7">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1004,7 +1004,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="0.0" y="302.0">
@@ -1019,117 +1019,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1138,7 +1138,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -1258,7 +1258,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -1272,7 +1272,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx10">
+            <clipPath id="_sample_helper_static_id_prefix_10">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1368,7 +1368,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -1386,7 +1386,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1506,7 +1506,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="452.0" y="302.0">
@@ -1521,117 +1521,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1640,7 +1640,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -1760,7 +1760,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -1774,7 +1774,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1870,7 +1870,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -1888,7 +1888,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx15">
+            <clipPath id="_sample_helper_static_id_prefix_15">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -2008,7 +2008,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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 c40bb93b8..efb8e151e 100644
--- a/docs/images/guides/layout/guideStylesTextLegendStrip_dark.svg
+++ b/docs/images/guides/layout/guideStylesTextLegendStrip_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="600.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -254,7 +254,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -268,7 +268,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -364,7 +364,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -382,7 +382,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx3">
+            <clipPath id="_sample_helper_static_id_prefix_3">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -502,7 +502,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="452.0" y="0.0">
@@ -517,117 +517,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -636,7 +636,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -756,7 +756,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -770,7 +770,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx6">
+            <clipPath id="_sample_helper_static_id_prefix_6">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -866,7 +866,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -884,7 +884,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx7">
+            <clipPath id="_sample_helper_static_id_prefix_7">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1004,7 +1004,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="0.0" y="302.0">
@@ -1019,117 +1019,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1138,7 +1138,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -1258,7 +1258,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -1272,7 +1272,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx10">
+            <clipPath id="_sample_helper_static_id_prefix_10">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1368,7 +1368,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -1386,7 +1386,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1506,7 +1506,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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="448.0" height="298.0" x="452.0" y="302.0">
@@ -1521,117 +1521,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1640,7 +1640,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 0.0 Z">
       </path>
       <g transform="translate(31.0 26.5 ) ">
@@ -1760,7 +1760,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(21.961210910936405 22.0 ) ">
             <g>
               <g>
@@ -1774,7 +1774,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="21.961210910936405" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -1870,7 +1870,7 @@ font-size: 13.0px;
           <g transform="translate(191.50484863613295 22.0 ) ">
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (191.50484863613295, 22.0), (159.54363772519653, 197.0)]">
           <g transform="translate(191.50484863613295 22.0 ) ">
             <g>
               <g>
@@ -1888,7 +1888,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx15">
+            <clipPath id="_sample_helper_static_id_prefix_15">
               <rect x="191.50484863613295" y="22.0" width="159.54363772519653" height="197.0">
               </rect>
             </clipPath>
@@ -2008,7 +2008,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="M1.5 0.0 L1.5 298.0 L446.5 298.0 L446.5 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 873fcbb2c..fee1bd961 100644
--- a/docs/images/guides/layout/guideStylesTextTitleLegend.svg
+++ b/docs/images/guides/layout/guideStylesTextTitleLegend.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="600.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -245,7 +245,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -263,7 +263,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="324.10666999492486" height="219.0">
               </rect>
             </clipPath>
@@ -378,7 +378,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="452.0" y="0.0">
@@ -393,117 +393,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -512,7 +512,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -623,7 +623,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -641,7 +641,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="324.10666999492486" height="219.0">
               </rect>
             </clipPath>
@@ -756,7 +756,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="0.0" y="302.0">
@@ -771,117 +771,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -890,7 +890,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1001,7 +1001,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1019,7 +1019,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="29.941816366404606" y="0.0" width="324.10666999492486" height="219.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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="452.0" y="302.0">
@@ -1149,117 +1149,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1268,7 +1268,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1379,7 +1379,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1397,7 +1397,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="29.941816366404606" y="0.0" width="324.10666999492486" height="219.0">
               </rect>
             </clipPath>
@@ -1512,7 +1512,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 298.0 L448.0 298.0 L448.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 4dc5bfaa8..ba0f5ab6c 100644
--- a/docs/images/guides/layout/guideStylesTextTitleLegend_dark.svg
+++ b/docs/images/guides/layout/guideStylesTextTitleLegend_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="600.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -245,7 +245,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -263,7 +263,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="324.10666999492486" height="219.0">
               </rect>
             </clipPath>
@@ -378,7 +378,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="452.0" y="0.0">
@@ -393,117 +393,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -512,7 +512,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -623,7 +623,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -641,7 +641,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="324.10666999492486" height="219.0">
               </rect>
             </clipPath>
@@ -756,7 +756,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="0.0" y="302.0">
@@ -771,117 +771,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -890,7 +890,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1001,7 +1001,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1019,7 +1019,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="29.941816366404606" y="0.0" width="324.10666999492486" height="219.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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="452.0" y="302.0">
@@ -1149,117 +1149,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1268,7 +1268,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1379,7 +1379,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (324.10666999492486, 219.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -1397,7 +1397,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx11">
+            <clipPath id="_sample_helper_static_id_prefix_11">
               <rect x="29.941816366404606" y="0.0" width="324.10666999492486" height="219.0">
               </rect>
             </clipPath>
@@ -1512,7 +1512,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 298.0 L448.0 298.0 L448.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 86fd4781f..05731fd5b 100644
--- a/docs/images/guides/layout/guideStylesTooltipAndBackground.svg
+++ b/docs/images/guides/layout/guideStylesTooltipAndBackground.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -174,7 +174,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -420,7 +420,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="332.08727545039307" height="321.0">
               </rect>
             </clipPath>
@@ -649,7 +649,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -664,117 +664,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -783,7 +783,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -934,7 +934,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1180,7 +1180,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="332.08727545039307" height="321.0">
               </rect>
             </clipPath>
@@ -1312,7 +1312,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 400.0 L448.0 400.0 L448.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 5017e6b63..baa536a9d 100644
--- a/docs/images/guides/layout/guideStylesTooltipAndBackground_dark.svg
+++ b/docs/images/guides/layout/guideStylesTooltipAndBackground_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -283,7 +283,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -529,7 +529,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="332.08727545039307" height="321.0">
               </rect>
             </clipPath>
@@ -649,7 +649,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -664,117 +664,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -783,7 +783,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -934,7 +934,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1180,7 +1180,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="332.08727545039307" height="321.0">
               </rect>
             </clipPath>
@@ -1312,7 +1312,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 400.0 L448.0 400.0 L448.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 e9221394a..03b1681a8 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 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: Lucida Grande, sans-serif;
 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 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: Lucida Grande, sans-serif;
 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 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: Lucida Grande, sans-serif;
 font-size: 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (22.238373906855962, 0.0), (588.4636587095741, 355.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (22.238373906855962, 0.0), (588.4636587095741, 355.0)]">
         <g transform="translate(22.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="22.238373906855962" y="0.0" width="588.4636587095741" height="355.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 84e6ad0b0..51eafc157 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 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: Lucida Grande, sans-serif;
 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 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: Lucida Grande, sans-serif;
 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 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: Lucida Grande, sans-serif;
 font-size: 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (22.238373906855962, 0.0), (588.4636587095741, 355.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (22.238373906855962, 0.0), (588.4636587095741, 355.0)]">
         <g transform="translate(22.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="22.238373906855962" y="0.0" width="588.4636587095741" height="355.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 b5e4c4490..f47d92cf7 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_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: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="355.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 86b3dc320..24926628f 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_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: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="355.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 02740eeda..31a2413b0 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 305.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 305.6666666666667)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="305.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 a2e64c724..83d12f81c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 305.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 305.6666666666667)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="305.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 3a8f01aad..f6905443f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (474.15461968595656, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (474.15461968595656, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="474.15461968595656" height="411.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 ee818ef9d..bd9cdc2b1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (474.15461968595656, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (474.15461968595656, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="474.15461968595656" height="411.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 442fe299f..1df04c3f1 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 76.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 311.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 311.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="311.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 0e186c099..01c05cf99 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 76.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 311.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 311.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="311.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 31a1dc7f4..88668992b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 e1cc67585..30fc7579d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 842e66f73..9ff1b29e3 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (532.2501119994372, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (532.2501119994372, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="532.2501119994372" height="411.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 2ffdf409c..532f16bda 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (532.2501119994372, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (532.2501119994372, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="532.2501119994372" height="411.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 56f407ee8..b20d41a8c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 312.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 312.6666666666667)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="312.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 8db6d4225..32bd76f7f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 312.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 312.6666666666667)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="312.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 49359db9f..f69139cae 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #008000;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="355.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 01d9f1121..5b732f2e8 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: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #008000;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="355.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 e8867498f..76dfcfb2d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="391.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 1361fd467..dbcc0264d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="391.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 f1a38d3bd..31f7d0068 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="391.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 7887cf29e..4aacae9de 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="391.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 2468f37a8..926dd024e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 372.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 372.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="372.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 94a3bdd7f..2fd22e4b4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 372.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 372.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="372.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 52d577a40..ed6caa885 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="355.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 903c11946..04c19c088 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 355.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="355.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 72ff99c0e..336950109 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 266.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 266.6666666666667)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="266.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 7f3d9ea1f..ae4f89a6c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 266.6666666666667)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 266.6666666666667)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="266.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 dad92b71d..26353ee65 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.0 6.5 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (280.6443899891293, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (280.6443899891293, 178.5)]">
         <g transform="translate(21.961210910936405 22.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="21.961210910936405" y="22.0" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="22.0" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (312.6056009000657, 22.0), (280.6443899891293, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (312.6056009000657, 22.0), (280.6443899891293, 178.5)]">
         <g transform="translate(312.6056009000657 22.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="312.6056009000657" y="22.0" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="312.6056009000657" y="22.0" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
@@ -362,7 +362,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 232.5), (280.6443899891293, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 232.5), (280.6443899891293, 178.5)]">
         <g transform="translate(21.961210910936405 232.5 ) ">
           <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="21.961210910936405" y="232.5" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="21.961210910936405" y="232.5" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
@@ -526,7 +526,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (312.6056009000657, 232.5), (280.6443899891293, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (312.6056009000657, 232.5), (280.6443899891293, 178.5)]">
         <g transform="translate(312.6056009000657 232.5 ) ">
           <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="312.6056009000657" y="232.5" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="312.6056009000657" y="232.5" width="280.6443899891293" height="178.5">
             </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="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 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 a79e70f54..e322e25e5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.0 6.5 ) ">
@@ -202,7 +202,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (280.6443899891293, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (280.6443899891293, 178.5)]">
         <g transform="translate(21.961210910936405 22.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="21.961210910936405" y="22.0" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="22.0" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
@@ -284,7 +284,7 @@ font-size: 13.0px;
         <g transform="translate(312.6056009000657 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (312.6056009000657, 22.0), (280.6443899891293, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (312.6056009000657, 22.0), (280.6443899891293, 178.5)]">
         <g transform="translate(312.6056009000657 22.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="312.6056009000657" y="22.0" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="312.6056009000657" y="22.0" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
@@ -448,7 +448,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (21.961210910936405, 232.5), (280.6443899891293, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (21.961210910936405, 232.5), (280.6443899891293, 178.5)]">
         <g transform="translate(21.961210910936405 232.5 ) ">
           <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="21.961210910936405" y="232.5" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="21.961210910936405" y="232.5" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
@@ -577,7 +577,7 @@ font-size: 13.0px;
         <g transform="translate(312.6056009000657 232.5 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (312.6056009000657, 232.5), (280.6443899891293, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (312.6056009000657, 232.5), (280.6443899891293, 178.5)]">
         <g transform="translate(312.6056009000657 232.5 ) ">
           <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="312.6056009000657" y="232.5" width="280.6443899891293" height="178.5">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="312.6056009000657" y="232.5" width="280.6443899891293" height="178.5">
             </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="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 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 6bf812cee..fa2ec1b4e 100644
--- a/docs/images/guides/multiplot/guideBunchCombineWithStyles.svg
+++ b/docs/images/guides/multiplot/guideBunchCombineWithStyles.svg
@@ -11,117 +11,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -141,117 +141,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx3 .plot-title {
+#_sample_helper_static_id_prefix_3 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx3 .plot-subtitle {
+#_sample_helper_static_id_prefix_3 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .plot-caption {
+#_sample_helper_static_id_prefix_3 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .hyperlink-element {
+#_sample_helper_static_id_prefix_3 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx3 .legend-title {
+#_sample_helper_static_id_prefix_3 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .legend-item {
+#_sample_helper_static_id_prefix_3 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-x {
+#_sample_helper_static_id_prefix_3 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-x {
+#_sample_helper_static_id_prefix_3 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-y {
+#_sample_helper_static_id_prefix_3 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-y {
+#_sample_helper_static_id_prefix_3 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -261,7 +261,7 @@ font-size: 13.0px;
 
   
 </style>
-<g transform="translate(0.0 0.0)" id="xXxprefixXx0">
+<g transform="translate(0.0 0.0)" 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 200.0 L600.0 200.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -354,7 +354,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 168.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 168.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -402,7 +402,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="542.0387890890636" height="168.0">
             </rect>
           </clipPath>
@@ -419,10 +419,10 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 200.0 L600.0 200.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 
-<g transform="translate(0.0 200.0)" id="xXxprefixXx3">
+<g transform="translate(0.0 200.0)" id="_sample_helper_static_id_prefix_3">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 200.0 L600.0 200.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -481,7 +481,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 164.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 164.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -893,7 +893,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="21.961210910936405" y="0.0" width="542.0387890890636" height="164.0">
             </rect>
           </clipPath>
@@ -915,7 +915,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 200.0 L600.0 200.0 L600.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/multiplot/guideBunchCombineWithStyles_dark.svg b/docs/images/guides/multiplot/guideBunchCombineWithStyles_dark.svg
index 9e3c5b632..cb9e29772 100644
--- a/docs/images/guides/multiplot/guideBunchCombineWithStyles_dark.svg
+++ b/docs/images/guides/multiplot/guideBunchCombineWithStyles_dark.svg
@@ -11,117 +11,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -141,117 +141,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx3 .plot-title {
+#_sample_helper_static_id_prefix_3 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx3 .plot-subtitle {
+#_sample_helper_static_id_prefix_3 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .plot-caption {
+#_sample_helper_static_id_prefix_3 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .hyperlink-element {
+#_sample_helper_static_id_prefix_3 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx3 .legend-title {
+#_sample_helper_static_id_prefix_3 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .legend-item {
+#_sample_helper_static_id_prefix_3 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-x {
+#_sample_helper_static_id_prefix_3 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-x {
+#_sample_helper_static_id_prefix_3 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-y {
+#_sample_helper_static_id_prefix_3 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-y {
+#_sample_helper_static_id_prefix_3 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -261,7 +261,7 @@ font-size: 13.0px;
 
   
 </style>
-<g transform="translate(0.0 0.0)" id="xXxprefixXx0">
+<g transform="translate(0.0 0.0)" 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 200.0 L600.0 200.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -354,7 +354,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 168.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 168.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -402,7 +402,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="542.0387890890636" height="168.0">
             </rect>
           </clipPath>
@@ -419,10 +419,10 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 200.0 L600.0 200.0 L600.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 
-<g transform="translate(0.0 200.0)" id="xXxprefixXx3">
+<g transform="translate(0.0 200.0)" id="_sample_helper_static_id_prefix_3">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 200.0 L600.0 200.0 L600.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -481,7 +481,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 164.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 164.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -893,7 +893,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="21.961210910936405" y="0.0" width="542.0387890890636" height="164.0">
             </rect>
           </clipPath>
@@ -915,7 +915,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 200.0 L600.0 200.0 L600.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/multiplot/guideFacetsArrangeVertically.svg b/docs/images/guides/multiplot/guideFacetsArrangeVertically.svg
index b7415b100..c519dc132 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.5000000000000568 0.0 L1.5000000000000568 554.0 L703.5 554.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.000000000000057 6.5 ) ">
@@ -166,7 +166,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.034701220281416, 41.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.034701220281416, 41.0), (167.9122541195635, 50.0)]">
         <g transform="translate(31.034701220281416 41.0 ) ">
           <g>
             <g>
@@ -178,7 +178,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.034701220281416" y="41.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -228,7 +228,7 @@ font-size: 13.0px;
         <g transform="translate(208.94695533984492 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (208.94695533984492, 41.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (208.94695533984492, 41.0), (167.9122541195635, 50.0)]">
         <g transform="translate(208.94695533984492 41.0 ) ">
           <g>
             <g>
@@ -240,7 +240,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="208.94695533984492" y="41.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -290,7 +290,7 @@ font-size: 13.0px;
         <g transform="translate(386.8592094594084 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (386.8592094594084, 41.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (386.8592094594084, 41.0), (167.9122541195635, 50.0)]">
         <g transform="translate(386.8592094594084 41.0 ) ">
           <g>
             <g>
@@ -405,7 +405,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="386.8592094594084" y="41.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -464,7 +464,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (31.034701220281416, 142.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (31.034701220281416, 142.0), (167.9122541195635, 50.0)]">
         <g transform="translate(31.034701220281416 142.0 ) ">
           <g>
             <g>
@@ -482,7 +482,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="31.034701220281416" y="142.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -532,7 +532,7 @@ font-size: 13.0px;
         <g transform="translate(208.94695533984492 142.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (208.94695533984492, 142.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (208.94695533984492, 142.0), (167.9122541195635, 50.0)]">
         <g transform="translate(208.94695533984492 142.0 ) ">
           <g>
             <g>
@@ -548,7 +548,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="208.94695533984492" y="142.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -598,7 +598,7 @@ font-size: 13.0px;
         <g transform="translate(386.8592094594084 142.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (386.8592094594084, 142.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (386.8592094594084, 142.0), (167.9122541195635, 50.0)]">
         <g transform="translate(386.8592094594084 142.0 ) ">
           <g>
             <g>
@@ -683,7 +683,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="386.8592094594084" y="142.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -742,7 +742,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (31.034701220281416, 243.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (31.034701220281416, 243.0), (167.9122541195635, 50.0)]">
         <g transform="translate(31.034701220281416 243.0 ) ">
           <g>
             <g>
@@ -754,7 +754,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="31.034701220281416" y="243.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -804,7 +804,7 @@ font-size: 13.0px;
         <g transform="translate(208.94695533984492 243.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (208.94695533984492, 243.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (208.94695533984492, 243.0), (167.9122541195635, 50.0)]">
         <g transform="translate(208.94695533984492 243.0 ) ">
           <g>
             <g>
@@ -819,7 +819,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="208.94695533984492" y="243.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -869,7 +869,7 @@ font-size: 13.0px;
         <g transform="translate(386.8592094594084 243.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (386.8592094594084, 243.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (386.8592094594084, 243.0), (167.9122541195635, 50.0)]">
         <g transform="translate(386.8592094594084 243.0 ) ">
           <g>
             <g>
@@ -881,7 +881,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="386.8592094594084" y="243.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -940,7 +940,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (31.034701220281416, 344.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (31.034701220281416, 344.0), (167.9122541195635, 50.0)]">
         <g transform="translate(31.034701220281416 344.0 ) ">
           <g>
             <g>
@@ -1021,7 +1021,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="31.034701220281416" y="344.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1071,7 +1071,7 @@ font-size: 13.0px;
         <g transform="translate(208.94695533984492 344.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (208.94695533984492, 344.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (208.94695533984492, 344.0), (167.9122541195635, 50.0)]">
         <g transform="translate(208.94695533984492 344.0 ) ">
           <g>
             <g>
@@ -1144,7 +1144,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="208.94695533984492" y="344.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1194,7 +1194,7 @@ font-size: 13.0px;
         <g transform="translate(386.8592094594084 344.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (386.8592094594084, 344.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (386.8592094594084, 344.0), (167.9122541195635, 50.0)]">
         <g transform="translate(386.8592094594084 344.0 ) ">
           <g>
             <g>
@@ -1275,7 +1275,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="386.8592094594084" y="344.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1352,7 +1352,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (31.034701220281416, 445.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (31.034701220281416, 445.0), (167.9122541195635, 50.0)]">
         <g transform="translate(31.034701220281416 445.0 ) ">
           <g>
             <g>
@@ -1368,7 +1368,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx13">
+          <clipPath id="_sample_helper_static_id_prefix_13">
             <rect x="31.034701220281416" y="445.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1436,7 +1436,7 @@ font-size: 13.0px;
         <g transform="translate(208.94695533984492 445.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (208.94695533984492, 445.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (208.94695533984492, 445.0), (167.9122541195635, 50.0)]">
         <g transform="translate(208.94695533984492 445.0 ) ">
           <g>
             <g>
@@ -1448,7 +1448,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx14">
+          <clipPath id="_sample_helper_static_id_prefix_14">
             <rect x="208.94695533984492" y="445.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1516,7 +1516,7 @@ font-size: 13.0px;
         <g transform="translate(386.8592094594084 445.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (386.8592094594084, 445.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (386.8592094594084, 445.0), (167.9122541195635, 50.0)]">
         <g transform="translate(386.8592094594084 445.0 ) ">
           <g>
             <g>
@@ -1528,7 +1528,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx15">
+          <clipPath id="_sample_helper_static_id_prefix_15">
             <rect x="386.8592094594084" y="445.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1633,6 +1633,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M1.5000000000000568 0.0 L1.5000000000000568 554.0 L703.5 554.0 L703.5 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/guideFacetsArrangeVertically_dark.svg b/docs/images/guides/multiplot/guideFacetsArrangeVertically_dark.svg
index 38eb4ede0..9bcf2aa1e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.5000000000000568 0.0 L1.5000000000000568 554.0 L703.5 554.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.000000000000057 6.5 ) ">
@@ -166,7 +166,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (31.034701220281416, 41.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (31.034701220281416, 41.0), (167.9122541195635, 50.0)]">
         <g transform="translate(31.034701220281416 41.0 ) ">
           <g>
             <g>
@@ -178,7 +178,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="31.034701220281416" y="41.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -228,7 +228,7 @@ font-size: 13.0px;
         <g transform="translate(208.94695533984492 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (208.94695533984492, 41.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (208.94695533984492, 41.0), (167.9122541195635, 50.0)]">
         <g transform="translate(208.94695533984492 41.0 ) ">
           <g>
             <g>
@@ -240,7 +240,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="208.94695533984492" y="41.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -290,7 +290,7 @@ font-size: 13.0px;
         <g transform="translate(386.8592094594084 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (386.8592094594084, 41.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (386.8592094594084, 41.0), (167.9122541195635, 50.0)]">
         <g transform="translate(386.8592094594084 41.0 ) ">
           <g>
             <g>
@@ -405,7 +405,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="386.8592094594084" y="41.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -464,7 +464,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (31.034701220281416, 142.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (31.034701220281416, 142.0), (167.9122541195635, 50.0)]">
         <g transform="translate(31.034701220281416 142.0 ) ">
           <g>
             <g>
@@ -482,7 +482,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="31.034701220281416" y="142.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -532,7 +532,7 @@ font-size: 13.0px;
         <g transform="translate(208.94695533984492 142.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (208.94695533984492, 142.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (208.94695533984492, 142.0), (167.9122541195635, 50.0)]">
         <g transform="translate(208.94695533984492 142.0 ) ">
           <g>
             <g>
@@ -548,7 +548,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="208.94695533984492" y="142.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -598,7 +598,7 @@ font-size: 13.0px;
         <g transform="translate(386.8592094594084 142.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (386.8592094594084, 142.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (386.8592094594084, 142.0), (167.9122541195635, 50.0)]">
         <g transform="translate(386.8592094594084 142.0 ) ">
           <g>
             <g>
@@ -683,7 +683,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="386.8592094594084" y="142.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -742,7 +742,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (31.034701220281416, 243.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (31.034701220281416, 243.0), (167.9122541195635, 50.0)]">
         <g transform="translate(31.034701220281416 243.0 ) ">
           <g>
             <g>
@@ -754,7 +754,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="31.034701220281416" y="243.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -804,7 +804,7 @@ font-size: 13.0px;
         <g transform="translate(208.94695533984492 243.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (208.94695533984492, 243.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (208.94695533984492, 243.0), (167.9122541195635, 50.0)]">
         <g transform="translate(208.94695533984492 243.0 ) ">
           <g>
             <g>
@@ -819,7 +819,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="208.94695533984492" y="243.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -869,7 +869,7 @@ font-size: 13.0px;
         <g transform="translate(386.8592094594084 243.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (386.8592094594084, 243.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (386.8592094594084, 243.0), (167.9122541195635, 50.0)]">
         <g transform="translate(386.8592094594084 243.0 ) ">
           <g>
             <g>
@@ -881,7 +881,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="386.8592094594084" y="243.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -940,7 +940,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (31.034701220281416, 344.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (31.034701220281416, 344.0), (167.9122541195635, 50.0)]">
         <g transform="translate(31.034701220281416 344.0 ) ">
           <g>
             <g>
@@ -1021,7 +1021,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="31.034701220281416" y="344.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1071,7 +1071,7 @@ font-size: 13.0px;
         <g transform="translate(208.94695533984492 344.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (208.94695533984492, 344.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (208.94695533984492, 344.0), (167.9122541195635, 50.0)]">
         <g transform="translate(208.94695533984492 344.0 ) ">
           <g>
             <g>
@@ -1144,7 +1144,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="208.94695533984492" y="344.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1194,7 +1194,7 @@ font-size: 13.0px;
         <g transform="translate(386.8592094594084 344.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (386.8592094594084, 344.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (386.8592094594084, 344.0), (167.9122541195635, 50.0)]">
         <g transform="translate(386.8592094594084 344.0 ) ">
           <g>
             <g>
@@ -1275,7 +1275,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="386.8592094594084" y="344.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1352,7 +1352,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (31.034701220281416, 445.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (31.034701220281416, 445.0), (167.9122541195635, 50.0)]">
         <g transform="translate(31.034701220281416 445.0 ) ">
           <g>
             <g>
@@ -1368,7 +1368,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx13">
+          <clipPath id="_sample_helper_static_id_prefix_13">
             <rect x="31.034701220281416" y="445.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1436,7 +1436,7 @@ font-size: 13.0px;
         <g transform="translate(208.94695533984492 445.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (208.94695533984492, 445.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (208.94695533984492, 445.0), (167.9122541195635, 50.0)]">
         <g transform="translate(208.94695533984492 445.0 ) ">
           <g>
             <g>
@@ -1448,7 +1448,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx14">
+          <clipPath id="_sample_helper_static_id_prefix_14">
             <rect x="208.94695533984492" y="445.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1516,7 +1516,7 @@ font-size: 13.0px;
         <g transform="translate(386.8592094594084 445.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (386.8592094594084, 445.0), (167.9122541195635, 50.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (386.8592094594084, 445.0), (167.9122541195635, 50.0)]">
         <g transform="translate(386.8592094594084 445.0 ) ">
           <g>
             <g>
@@ -1528,7 +1528,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx15">
+          <clipPath id="_sample_helper_static_id_prefix_15">
             <rect x="386.8592094594084" y="445.0" width="167.9122541195635" height="50.0">
             </rect>
           </clipPath>
@@ -1633,6 +1633,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M1.5000000000000568 0.0 L1.5000000000000568 554.0 L703.5 554.0 L703.5 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/guideFacetsGridXPlot.svg b/docs/images/guides/multiplot/guideFacetsGridXPlot.svg
index b51fe0159..afb0ee004 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.0 6.5 ) ">
@@ -266,7 +266,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (97.76205053360711, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (97.76205053360711, 389.0)]">
         <g transform="translate(25.961210910936405 22.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="25.961210910936405" y="22.0" width="97.76205053360711" height="389.0">
             </rect>
           </clipPath>
@@ -362,7 +362,7 @@ font-size: 13.0px;
         <g transform="translate(133.7232614445435 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (133.7232614445435, 22.0), (97.76205053360711, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (133.7232614445435, 22.0), (97.76205053360711, 389.0)]">
         <g transform="translate(133.7232614445435 22.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.7232614445435" y="22.0" width="97.76205053360711" height="389.0">
             </rect>
           </clipPath>
@@ -653,7 +653,7 @@ font-size: 13.0px;
         <g transform="translate(241.4853119781506 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (241.4853119781506, 22.0), (97.76205053360711, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (241.4853119781506, 22.0), (97.76205053360711, 389.0)]">
         <g transform="translate(241.4853119781506 22.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="241.4853119781506" y="22.0" width="97.76205053360711" height="389.0">
             </rect>
           </clipPath>
@@ -748,7 +748,7 @@ font-size: 13.0px;
         <g transform="translate(349.24736251175773 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (349.24736251175773, 22.0), (97.76205053360711, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (349.24736251175773, 22.0), (97.76205053360711, 389.0)]">
         <g transform="translate(349.24736251175773 22.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="349.24736251175773" y="22.0" width="97.76205053360711" height="389.0">
             </rect>
           </clipPath>
@@ -923,7 +923,7 @@ font-size: 13.0px;
         <g transform="translate(457.00941304536485 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (457.00941304536485, 22.0), (97.76205053360711, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (457.00941304536485, 22.0), (97.76205053360711, 389.0)]">
         <g transform="translate(457.00941304536485 22.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="457.00941304536485" y="22.0" width="97.76205053360711" height="389.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="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 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 914f7929d..4237c92c5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.0 6.5 ) ">
@@ -266,7 +266,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (97.76205053360711, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (97.76205053360711, 389.0)]">
         <g transform="translate(25.961210910936405 22.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="25.961210910936405" y="22.0" width="97.76205053360711" height="389.0">
             </rect>
           </clipPath>
@@ -362,7 +362,7 @@ font-size: 13.0px;
         <g transform="translate(133.7232614445435 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (133.7232614445435, 22.0), (97.76205053360711, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (133.7232614445435, 22.0), (97.76205053360711, 389.0)]">
         <g transform="translate(133.7232614445435 22.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.7232614445435" y="22.0" width="97.76205053360711" height="389.0">
             </rect>
           </clipPath>
@@ -653,7 +653,7 @@ font-size: 13.0px;
         <g transform="translate(241.4853119781506 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (241.4853119781506, 22.0), (97.76205053360711, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (241.4853119781506, 22.0), (97.76205053360711, 389.0)]">
         <g transform="translate(241.4853119781506 22.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="241.4853119781506" y="22.0" width="97.76205053360711" height="389.0">
             </rect>
           </clipPath>
@@ -748,7 +748,7 @@ font-size: 13.0px;
         <g transform="translate(349.24736251175773 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (349.24736251175773, 22.0), (97.76205053360711, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (349.24736251175773, 22.0), (97.76205053360711, 389.0)]">
         <g transform="translate(349.24736251175773 22.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="349.24736251175773" y="22.0" width="97.76205053360711" height="389.0">
             </rect>
           </clipPath>
@@ -923,7 +923,7 @@ font-size: 13.0px;
         <g transform="translate(457.00941304536485 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (457.00941304536485, 22.0), (97.76205053360711, 389.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (457.00941304536485, 22.0), (97.76205053360711, 389.0)]">
         <g transform="translate(457.00941304536485 22.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="457.00941304536485" y="22.0" width="97.76205053360711" height="389.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="M1.5 0.0 L1.5 470.0 L703.5 470.0 L703.5 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 b35c51fe7..1bbc44a90 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -331,7 +331,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (531.8102526680356, 249.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (531.8102526680356, 249.0)]">
         <g transform="translate(25.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="25.961210910936405" y="0.0" width="531.8102526680356" height="249.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 72163bd83..3e8f35485 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -331,7 +331,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (531.8102526680356, 249.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (531.8102526680356, 249.0)]">
         <g transform="translate(25.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="25.961210910936405" y="0.0" width="531.8102526680356" height="249.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 58b984f6a..a7e444e93 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 22.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.961210910936405" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -238,7 +238,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (129.92326144454353, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (129.92326144454353, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 22.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="129.92326144454353" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -364,7 +364,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (233.88531197815064, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (233.88531197815064, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 22.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="233.88531197815064" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -421,7 +421,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (337.84736251175775, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (337.84736251175775, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 22.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="337.84736251175775" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -484,7 +484,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (441.80941304536486, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (441.80941304536486, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 22.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="441.80941304536486" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -566,7 +566,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (25.961210910936405, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (25.961210910936405, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 155.0 ) ">
           <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="25.961210910936405" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -616,7 +616,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (129.92326144454353, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (129.92326144454353, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 155.0 ) ">
           <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="129.92326144454353" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -727,7 +727,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (233.88531197815064, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (233.88531197815064, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 155.0 ) ">
           <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="233.88531197815064" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -780,7 +780,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (337.84736251175775, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (337.84736251175775, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 155.0 ) ">
           <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="337.84736251175775" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -834,7 +834,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (441.80941304536486, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (441.80941304536486, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 155.0 ) ">
           <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="441.80941304536486" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -918,7 +918,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.961210910936405, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.961210910936405, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 288.0 ) ">
           <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="25.961210910936405" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -977,7 +977,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (129.92326144454353, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (129.92326144454353, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 288.0 ) ">
           <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="129.92326144454353" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1105,7 +1105,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (233.88531197815064, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (233.88531197815064, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 288.0 ) ">
           <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="233.88531197815064" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1164,7 +1164,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (337.84736251175775, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (337.84736251175775, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 288.0 ) ">
           <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="337.84736251175775" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1296,7 +1296,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (441.80941304536486, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (441.80941304536486, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 288.0 ) ">
           <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="441.80941304536486" y="288.0" width="93.96205053360711" height="123.0">
             </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="M0.0 0.0 L0.0 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 b71fb9999..8fddcff6a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 22.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.961210910936405" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -238,7 +238,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (129.92326144454353, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (129.92326144454353, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 22.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="129.92326144454353" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -364,7 +364,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (233.88531197815064, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (233.88531197815064, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 22.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="233.88531197815064" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -421,7 +421,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (337.84736251175775, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (337.84736251175775, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 22.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="337.84736251175775" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -484,7 +484,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (441.80941304536486, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (441.80941304536486, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 22.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="441.80941304536486" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -566,7 +566,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (25.961210910936405, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (25.961210910936405, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 155.0 ) ">
           <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="25.961210910936405" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -616,7 +616,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (129.92326144454353, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (129.92326144454353, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 155.0 ) ">
           <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="129.92326144454353" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -727,7 +727,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (233.88531197815064, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (233.88531197815064, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 155.0 ) ">
           <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="233.88531197815064" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -780,7 +780,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (337.84736251175775, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (337.84736251175775, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 155.0 ) ">
           <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="337.84736251175775" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -834,7 +834,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (441.80941304536486, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (441.80941304536486, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 155.0 ) ">
           <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="441.80941304536486" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -918,7 +918,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.961210910936405, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.961210910936405, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 288.0 ) ">
           <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="25.961210910936405" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -977,7 +977,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (129.92326144454353, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (129.92326144454353, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 288.0 ) ">
           <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="129.92326144454353" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1105,7 +1105,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (233.88531197815064, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (233.88531197815064, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 288.0 ) ">
           <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="233.88531197815064" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1164,7 +1164,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (337.84736251175775, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (337.84736251175775, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 288.0 ) ">
           <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="337.84736251175775" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1296,7 +1296,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (441.80941304536486, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (441.80941304536486, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 288.0 ) ">
           <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="441.80941304536486" y="288.0" width="93.96205053360711" height="123.0">
             </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="M0.0 0.0 L0.0 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 daf5291a5..13efb3a1c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 22.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.961210910936405" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -234,7 +234,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (129.92326144454353, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (129.92326144454353, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 22.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="129.92326144454353" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -360,7 +360,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (233.88531197815064, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (233.88531197815064, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 22.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="233.88531197815064" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -417,7 +417,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (337.84736251175775, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (337.84736251175775, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 22.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="337.84736251175775" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -547,7 +547,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (441.80941304536486, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (441.80941304536486, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 22.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="441.80941304536486" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -732,7 +732,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (25.961210910936405, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (25.961210910936405, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 155.0 ) ">
           <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="25.961210910936405" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -782,7 +782,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (129.92326144454353, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (129.92326144454353, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 155.0 ) ">
           <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="129.92326144454353" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -893,7 +893,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (233.88531197815064, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (233.88531197815064, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 155.0 ) ">
           <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="233.88531197815064" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -946,7 +946,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (337.84736251175775, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (337.84736251175775, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 155.0 ) ">
           <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="337.84736251175775" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1000,7 +1000,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (441.80941304536486, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (441.80941304536486, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 155.0 ) ">
           <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="441.80941304536486" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1084,7 +1084,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.961210910936405, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.961210910936405, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 288.0 ) ">
           <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="25.961210910936405" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1147,7 +1147,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (129.92326144454353, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (129.92326144454353, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 288.0 ) ">
           <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="129.92326144454353" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1275,7 +1275,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (233.88531197815064, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (233.88531197815064, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 288.0 ) ">
           <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="233.88531197815064" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1334,7 +1334,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (337.84736251175775, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (337.84736251175775, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 288.0 ) ">
           <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="337.84736251175775" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1399,7 +1399,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (441.80941304536486, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (441.80941304536486, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 288.0 ) ">
           <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="441.80941304536486" y="288.0" width="93.96205053360711" height="123.0">
             </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="M0.0 0.0 L0.0 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 689391dd9..4a09ec434 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 22.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.961210910936405" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -234,7 +234,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (129.92326144454353, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (129.92326144454353, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 22.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="129.92326144454353" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -360,7 +360,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (233.88531197815064, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (233.88531197815064, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 22.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="233.88531197815064" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -417,7 +417,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (337.84736251175775, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (337.84736251175775, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 22.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="337.84736251175775" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -547,7 +547,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (441.80941304536486, 22.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (441.80941304536486, 22.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 22.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="441.80941304536486" y="22.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -732,7 +732,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (25.961210910936405, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (25.961210910936405, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 155.0 ) ">
           <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="25.961210910936405" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -782,7 +782,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (129.92326144454353, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (129.92326144454353, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 155.0 ) ">
           <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="129.92326144454353" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -893,7 +893,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (233.88531197815064, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (233.88531197815064, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 155.0 ) ">
           <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="233.88531197815064" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -946,7 +946,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (337.84736251175775, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (337.84736251175775, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 155.0 ) ">
           <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="337.84736251175775" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1000,7 +1000,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 155.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (441.80941304536486, 155.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (441.80941304536486, 155.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 155.0 ) ">
           <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="441.80941304536486" y="155.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1084,7 +1084,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.961210910936405, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.961210910936405, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(25.961210910936405 288.0 ) ">
           <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="25.961210910936405" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1147,7 +1147,7 @@ font-size: 13.0px;
         <g transform="translate(129.92326144454353 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (129.92326144454353, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (129.92326144454353, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(129.92326144454353 288.0 ) ">
           <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="129.92326144454353" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1275,7 +1275,7 @@ font-size: 13.0px;
         <g transform="translate(233.88531197815064 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (233.88531197815064, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (233.88531197815064, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(233.88531197815064 288.0 ) ">
           <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="233.88531197815064" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1334,7 +1334,7 @@ font-size: 13.0px;
         <g transform="translate(337.84736251175775 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (337.84736251175775, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (337.84736251175775, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(337.84736251175775 288.0 ) ">
           <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="337.84736251175775" y="288.0" width="93.96205053360711" height="123.0">
             </rect>
           </clipPath>
@@ -1399,7 +1399,7 @@ font-size: 13.0px;
         <g transform="translate(441.80941304536486 288.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (441.80941304536486, 288.0), (93.96205053360711, 123.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (441.80941304536486, 288.0), (93.96205053360711, 123.0)]">
         <g transform="translate(441.80941304536486 288.0 ) ">
           <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="441.80941304536486" y="288.0" width="93.96205053360711" height="123.0">
             </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="M0.0 0.0 L0.0 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 650226632..cb736ee79 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.5000000000000568 0.0 L1.5000000000000568 470.0 L703.5 470.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.000000000000057 6.5 ) ">
@@ -209,7 +209,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (169.60341755601183, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (169.60341755601183, 178.5)]">
         <g transform="translate(25.961210910936405 22.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="25.961210910936405" y="22.0" width="169.60341755601183" height="178.5">
             </rect>
           </clipPath>
@@ -284,7 +284,7 @@ font-size: 13.0px;
         <g transform="translate(205.56462846694825 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (205.56462846694825, 22.0), (169.60341755601183, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (205.56462846694825, 22.0), (169.60341755601183, 178.5)]">
         <g transform="translate(205.56462846694825 22.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="205.56462846694825" y="22.0" width="169.60341755601183" height="178.5">
             </rect>
           </clipPath>
@@ -572,7 +572,7 @@ font-size: 13.0px;
         <g transform="translate(385.1680460229601 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (385.1680460229601, 22.0), (169.60341755601183, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (385.1680460229601, 22.0), (169.60341755601183, 178.5)]">
         <g transform="translate(385.1680460229601 22.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="385.1680460229601" y="22.0" width="169.60341755601183" height="178.5">
             </rect>
           </clipPath>
@@ -700,7 +700,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (25.961210910936405, 232.5), (169.60341755601183, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (25.961210910936405, 232.5), (169.60341755601183, 178.5)]">
         <g transform="translate(25.961210910936405 232.5 ) ">
           <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="25.961210910936405" y="232.5" width="169.60341755601183" height="178.5">
             </rect>
           </clipPath>
@@ -872,7 +872,7 @@ font-size: 13.0px;
         <g transform="translate(205.56462846694825 232.5 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (205.56462846694825, 232.5), (169.60341755601183, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (205.56462846694825, 232.5), (169.60341755601183, 178.5)]">
         <g transform="translate(205.56462846694825 232.5 ) ">
           <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="205.56462846694825" y="232.5" width="169.60341755601183" height="178.5">
             </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="M1.5000000000000568 0.0 L1.5000000000000568 470.0 L703.5 470.0 L703.5 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 5f0e9be86..9c8f51857 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.5000000000000568 0.0 L1.5000000000000568 470.0 L703.5 470.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.000000000000057 6.5 ) ">
@@ -209,7 +209,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (169.60341755601183, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 22.0), (169.60341755601183, 178.5)]">
         <g transform="translate(25.961210910936405 22.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="25.961210910936405" y="22.0" width="169.60341755601183" height="178.5">
             </rect>
           </clipPath>
@@ -284,7 +284,7 @@ font-size: 13.0px;
         <g transform="translate(205.56462846694825 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (205.56462846694825, 22.0), (169.60341755601183, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (205.56462846694825, 22.0), (169.60341755601183, 178.5)]">
         <g transform="translate(205.56462846694825 22.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="205.56462846694825" y="22.0" width="169.60341755601183" height="178.5">
             </rect>
           </clipPath>
@@ -572,7 +572,7 @@ font-size: 13.0px;
         <g transform="translate(385.1680460229601 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (385.1680460229601, 22.0), (169.60341755601183, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (385.1680460229601, 22.0), (169.60341755601183, 178.5)]">
         <g transform="translate(385.1680460229601 22.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="385.1680460229601" y="22.0" width="169.60341755601183" height="178.5">
             </rect>
           </clipPath>
@@ -700,7 +700,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (25.961210910936405, 232.5), (169.60341755601183, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (25.961210910936405, 232.5), (169.60341755601183, 178.5)]">
         <g transform="translate(25.961210910936405 232.5 ) ">
           <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="25.961210910936405" y="232.5" width="169.60341755601183" height="178.5">
             </rect>
           </clipPath>
@@ -872,7 +872,7 @@ font-size: 13.0px;
         <g transform="translate(205.56462846694825 232.5 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (205.56462846694825, 232.5), (169.60341755601183, 178.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (205.56462846694825, 232.5), (169.60341755601183, 178.5)]">
         <g transform="translate(205.56462846694825 232.5 ) ">
           <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="205.56462846694825" y="232.5" width="169.60341755601183" height="178.5">
             </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="M1.5000000000000568 0.0 L1.5000000000000568 470.0 L703.5 470.0 L703.5 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 585b2e931..5ba7dda43 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.5 2.8421709430404007E-14 L1.5 470.0 L703.5 470.0 L703.5 2.8421709430404007E-14 Z">
     </path>
     <g transform="translate(31.0 6.500000000000028 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 41.0), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 41.0), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(25.961210910936405 41.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.961210910936405" y="41.0" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -245,7 +245,7 @@ font-size: 13.0px;
         <g transform="translate(133.7232614445435 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (133.7232614445435, 41.0), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (133.7232614445435, 41.0), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(133.7232614445435 41.0 ) ">
           <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="133.7232614445435" y="41.0" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -378,7 +378,7 @@ font-size: 13.0px;
         <g transform="translate(241.4853119781506 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (241.4853119781506, 41.0), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (241.4853119781506, 41.0), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(241.4853119781506 41.0 ) ">
           <g>
             <g>
@@ -390,7 +390,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="241.4853119781506" y="41.0" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -442,7 +442,7 @@ font-size: 13.0px;
         <g transform="translate(349.24736251175773 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (349.24736251175773, 41.0), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (349.24736251175773, 41.0), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(349.24736251175773 41.0 ) ">
           <g>
             <g>
@@ -460,7 +460,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="349.24736251175773" y="41.0" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -512,7 +512,7 @@ font-size: 13.0px;
         <g transform="translate(457.00941304536485 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (457.00941304536485, 41.0), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (457.00941304536485, 41.0), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(457.00941304536485 41.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="457.00941304536485" y="41.0" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -594,7 +594,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (25.961210910936405, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (25.961210910936405, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(25.961210910936405 181.33333333333331 ) ">
           <g>
             <g>
@@ -606,7 +606,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="25.961210910936405" y="181.33333333333331" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -658,7 +658,7 @@ font-size: 13.0px;
         <g transform="translate(133.7232614445435 181.33333333333331 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (133.7232614445435, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (133.7232614445435, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(133.7232614445435 181.33333333333331 ) ">
           <g>
             <g>
@@ -731,7 +731,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="133.7232614445435" y="181.33333333333331" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -783,7 +783,7 @@ font-size: 13.0px;
         <g transform="translate(241.4853119781506 181.33333333333331 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (241.4853119781506, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (241.4853119781506, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(241.4853119781506 181.33333333333331 ) ">
           <g>
             <g>
@@ -798,7 +798,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="241.4853119781506" y="181.33333333333331" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -850,7 +850,7 @@ font-size: 13.0px;
         <g transform="translate(349.24736251175773 181.33333333333331 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (349.24736251175773, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (349.24736251175773, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(349.24736251175773 181.33333333333331 ) ">
           <g>
             <g>
@@ -866,7 +866,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="349.24736251175773" y="181.33333333333331" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -918,7 +918,7 @@ font-size: 13.0px;
         <g transform="translate(457.00941304536485 181.33333333333331 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (457.00941304536485, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (457.00941304536485, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(457.00941304536485 181.33333333333331 ) ">
           <g>
             <g>
@@ -930,7 +930,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="457.00941304536485" y="181.33333333333331" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1009,7 +1009,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.961210910936405, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.961210910936405, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(25.961210910936405 321.66666666666663 ) ">
           <g>
             <g>
@@ -1021,7 +1021,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="25.961210910936405" y="321.66666666666663" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1082,7 +1082,7 @@ font-size: 13.0px;
         <g transform="translate(133.7232614445435 321.66666666666663 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (133.7232614445435, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (133.7232614445435, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(133.7232614445435 321.66666666666663 ) ">
           <g>
             <g>
@@ -1163,7 +1163,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="133.7232614445435" y="321.66666666666663" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1224,7 +1224,7 @@ font-size: 13.0px;
         <g transform="translate(241.4853119781506 321.66666666666663 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (241.4853119781506, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (241.4853119781506, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(241.4853119781506 321.66666666666663 ) ">
           <g>
             <g>
@@ -1236,7 +1236,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx13">
+          <clipPath id="_sample_helper_static_id_prefix_13">
             <rect x="241.4853119781506" y="321.66666666666663" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1297,7 +1297,7 @@ font-size: 13.0px;
         <g transform="translate(349.24736251175773 321.66666666666663 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (349.24736251175773, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (349.24736251175773, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(349.24736251175773 321.66666666666663 ) ">
           <g>
             <g>
@@ -1382,7 +1382,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx14">
+          <clipPath id="_sample_helper_static_id_prefix_14">
             <rect x="349.24736251175773" y="321.66666666666663" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1443,7 +1443,7 @@ font-size: 13.0px;
         <g transform="translate(457.00941304536485 321.66666666666663 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (457.00941304536485, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (457.00941304536485, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(457.00941304536485 321.66666666666663 ) ">
           <g>
             <g>
@@ -1558,7 +1558,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx15">
+          <clipPath id="_sample_helper_static_id_prefix_15">
             <rect x="457.00941304536485" y="321.66666666666663" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1663,6 +1663,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M1.5 2.8421709430404007E-14 L1.5 470.0 L703.5 470.0 L703.5 2.8421709430404007E-14 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/guideFacetsWrapTwoPlots_dark.svg b/docs/images/guides/multiplot/guideFacetsWrapTwoPlots_dark.svg
index da97e5b77..cc4588136 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.5 2.8421709430404007E-14 L1.5 470.0 L703.5 470.0 L703.5 2.8421709430404007E-14 Z">
     </path>
     <g transform="translate(31.0 6.500000000000028 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 41.0), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 41.0), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(25.961210910936405 41.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.961210910936405" y="41.0" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -245,7 +245,7 @@ font-size: 13.0px;
         <g transform="translate(133.7232614445435 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (133.7232614445435, 41.0), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (133.7232614445435, 41.0), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(133.7232614445435 41.0 ) ">
           <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="133.7232614445435" y="41.0" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -378,7 +378,7 @@ font-size: 13.0px;
         <g transform="translate(241.4853119781506 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (241.4853119781506, 41.0), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (241.4853119781506, 41.0), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(241.4853119781506 41.0 ) ">
           <g>
             <g>
@@ -390,7 +390,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="241.4853119781506" y="41.0" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -442,7 +442,7 @@ font-size: 13.0px;
         <g transform="translate(349.24736251175773 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (349.24736251175773, 41.0), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (349.24736251175773, 41.0), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(349.24736251175773 41.0 ) ">
           <g>
             <g>
@@ -460,7 +460,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="349.24736251175773" y="41.0" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -512,7 +512,7 @@ font-size: 13.0px;
         <g transform="translate(457.00941304536485 41.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (457.00941304536485, 41.0), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (457.00941304536485, 41.0), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(457.00941304536485 41.0 ) ">
           <g>
             <g>
@@ -524,7 +524,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="457.00941304536485" y="41.0" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -594,7 +594,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (25.961210910936405, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (25.961210910936405, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(25.961210910936405 181.33333333333331 ) ">
           <g>
             <g>
@@ -606,7 +606,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="25.961210910936405" y="181.33333333333331" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -658,7 +658,7 @@ font-size: 13.0px;
         <g transform="translate(133.7232614445435 181.33333333333331 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (133.7232614445435, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (133.7232614445435, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(133.7232614445435 181.33333333333331 ) ">
           <g>
             <g>
@@ -731,7 +731,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="133.7232614445435" y="181.33333333333331" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -783,7 +783,7 @@ font-size: 13.0px;
         <g transform="translate(241.4853119781506 181.33333333333331 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (241.4853119781506, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (241.4853119781506, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(241.4853119781506 181.33333333333331 ) ">
           <g>
             <g>
@@ -798,7 +798,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="241.4853119781506" y="181.33333333333331" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -850,7 +850,7 @@ font-size: 13.0px;
         <g transform="translate(349.24736251175773 181.33333333333331 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (349.24736251175773, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (349.24736251175773, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(349.24736251175773 181.33333333333331 ) ">
           <g>
             <g>
@@ -866,7 +866,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="349.24736251175773" y="181.33333333333331" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -918,7 +918,7 @@ font-size: 13.0px;
         <g transform="translate(457.00941304536485 181.33333333333331 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (457.00941304536485, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (457.00941304536485, 181.33333333333331), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(457.00941304536485 181.33333333333331 ) ">
           <g>
             <g>
@@ -930,7 +930,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="457.00941304536485" y="181.33333333333331" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1009,7 +1009,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (25.961210910936405, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (25.961210910936405, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(25.961210910936405 321.66666666666663 ) ">
           <g>
             <g>
@@ -1021,7 +1021,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="25.961210910936405" y="321.66666666666663" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1082,7 +1082,7 @@ font-size: 13.0px;
         <g transform="translate(133.7232614445435 321.66666666666663 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (133.7232614445435, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (133.7232614445435, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(133.7232614445435 321.66666666666663 ) ">
           <g>
             <g>
@@ -1163,7 +1163,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="133.7232614445435" y="321.66666666666663" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1224,7 +1224,7 @@ font-size: 13.0px;
         <g transform="translate(241.4853119781506 321.66666666666663 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx13)" clip-bounds-jfx="[rect (241.4853119781506, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_13)" clip-bounds-jfx="[rect (241.4853119781506, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(241.4853119781506 321.66666666666663 ) ">
           <g>
             <g>
@@ -1236,7 +1236,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx13">
+          <clipPath id="_sample_helper_static_id_prefix_13">
             <rect x="241.4853119781506" y="321.66666666666663" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1297,7 +1297,7 @@ font-size: 13.0px;
         <g transform="translate(349.24736251175773 321.66666666666663 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (349.24736251175773, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (349.24736251175773, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(349.24736251175773 321.66666666666663 ) ">
           <g>
             <g>
@@ -1382,7 +1382,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx14">
+          <clipPath id="_sample_helper_static_id_prefix_14">
             <rect x="349.24736251175773" y="321.66666666666663" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1443,7 +1443,7 @@ font-size: 13.0px;
         <g transform="translate(457.00941304536485 321.66666666666663 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx15)" clip-bounds-jfx="[rect (457.00941304536485, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_15)" clip-bounds-jfx="[rect (457.00941304536485, 321.66666666666663), (97.76205053360711, 89.33333333333333)]">
         <g transform="translate(457.00941304536485 321.66666666666663 ) ">
           <g>
             <g>
@@ -1558,7 +1558,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx15">
+          <clipPath id="_sample_helper_static_id_prefix_15">
             <rect x="457.00941304536485" y="321.66666666666663" width="97.76205053360711" height="89.33333333333333">
             </rect>
           </clipPath>
@@ -1663,6 +1663,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M1.5 2.8421709430404007E-14 L1.5 470.0 L703.5 470.0 L703.5 2.8421709430404007E-14 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/guideFreeFacetGridYFree.svg b/docs/images/guides/multiplot/guideFreeFacetGridYFree.svg
index 54b0c3614..784059904 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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 440.0 L705.0 440.0 L705.0 2.8421709430404007E-14 Z">
     </path>
     <g transform="translate(29.5 6.500000000000028 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (501.82964721256735, 120.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (501.82964721256735, 120.33333333333333)]">
         <g transform="translate(33.94181636640461 0.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="33.94181636640461" y="0.0" width="501.82964721256735" height="120.33333333333333">
             </rect>
           </clipPath>
@@ -361,7 +361,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (33.94181636640461, 130.33333333333331), (501.82964721256735, 120.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (33.94181636640461, 130.33333333333331), (501.82964721256735, 120.33333333333333)]">
         <g transform="translate(33.94181636640461 130.33333333333331 ) ">
           <g>
             <g>
@@ -441,7 +441,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="33.94181636640461" y="130.33333333333331" width="501.82964721256735" height="120.33333333333333">
             </rect>
           </clipPath>
@@ -554,7 +554,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (33.94181636640461, 260.66666666666663), (501.82964721256735, 120.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (33.94181636640461, 260.66666666666663), (501.82964721256735, 120.33333333333333)]">
         <g transform="translate(33.94181636640461 260.66666666666663 ) ">
           <g>
             <g>
@@ -811,7 +811,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="33.94181636640461" y="260.66666666666663" width="501.82964721256735" height="120.33333333333333">
             </rect>
           </clipPath>
@@ -909,6 +909,6 @@ font-size: 13.0px;
     <path fill="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 440.0 L705.0 440.0 L705.0 2.8421709430404007E-14 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 61e22ea8b..2f713f910 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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 440.0 L705.0 440.0 L705.0 2.8421709430404007E-14 Z">
     </path>
     <g transform="translate(29.5 6.500000000000028 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (501.82964721256735, 120.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (501.82964721256735, 120.33333333333333)]">
         <g transform="translate(33.94181636640461 0.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="33.94181636640461" y="0.0" width="501.82964721256735" height="120.33333333333333">
             </rect>
           </clipPath>
@@ -361,7 +361,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (33.94181636640461, 130.33333333333331), (501.82964721256735, 120.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (33.94181636640461, 130.33333333333331), (501.82964721256735, 120.33333333333333)]">
         <g transform="translate(33.94181636640461 130.33333333333331 ) ">
           <g>
             <g>
@@ -441,7 +441,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="33.94181636640461" y="130.33333333333331" width="501.82964721256735" height="120.33333333333333">
             </rect>
           </clipPath>
@@ -554,7 +554,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (33.94181636640461, 260.66666666666663), (501.82964721256735, 120.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (33.94181636640461, 260.66666666666663), (501.82964721256735, 120.33333333333333)]">
         <g transform="translate(33.94181636640461 260.66666666666663 ) ">
           <g>
             <g>
@@ -811,7 +811,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="33.94181636640461" y="260.66666666666663" width="501.82964721256735" height="120.33333333333333">
             </rect>
           </clipPath>
@@ -909,6 +909,6 @@ font-size: 13.0px;
     <path fill="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 440.0 L705.0 440.0 L705.0 2.8421709430404007E-14 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 d026deac8..1a69c254f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -331,7 +331,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (523.8296472125674, 249.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (523.8296472125674, 249.0)]">
         <g transform="translate(33.94181636640461 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="33.94181636640461" y="0.0" width="523.8296472125674" height="249.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 a6f2b6377..7e243e228 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -331,7 +331,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (523.8296472125674, 249.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (523.8296472125674, 249.0)]">
         <g transform="translate(33.94181636640461 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="33.94181636640461" y="0.0" width="523.8296472125674" height="249.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 55a0fd4e0..0de8d4765 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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 440.0 L705.0 440.0 L705.0 2.8421709430404007E-14 Z">
     </path>
     <g transform="translate(29.5 6.500000000000028 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (501.82964721256735, 120.33333333333331)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (501.82964721256735, 120.33333333333331)]">
         <g transform="translate(33.94181636640461 0.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="33.94181636640461" y="0.0" width="501.82964721256735" height="120.33333333333331">
             </rect>
           </clipPath>
@@ -359,7 +359,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (33.94181636640461, 130.33333333333331), (501.82964721256735, 120.33333333333331)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (33.94181636640461, 130.33333333333331), (501.82964721256735, 120.33333333333331)]">
         <g transform="translate(33.94181636640461 130.33333333333331 ) ">
           <g>
             <g>
@@ -439,7 +439,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="33.94181636640461" y="130.33333333333331" width="501.82964721256735" height="120.33333333333331">
             </rect>
           </clipPath>
@@ -552,7 +552,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (33.94181636640461, 260.66666666666663), (501.82964721256735, 120.33333333333331)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (33.94181636640461, 260.66666666666663), (501.82964721256735, 120.33333333333331)]">
         <g transform="translate(33.94181636640461 260.66666666666663 ) ">
           <g>
             <g>
@@ -809,7 +809,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="33.94181636640461" y="260.66666666666663" width="501.82964721256735" height="120.33333333333331">
             </rect>
           </clipPath>
@@ -907,6 +907,6 @@ font-size: 13.0px;
     <path fill="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 440.0 L705.0 440.0 L705.0 2.8421709430404007E-14 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 dfc3cc526..abfea41f6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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 440.0 L705.0 440.0 L705.0 2.8421709430404007E-14 Z">
     </path>
     <g transform="translate(29.5 6.500000000000028 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (501.82964721256735, 120.33333333333331)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.94181636640461, 0.0), (501.82964721256735, 120.33333333333331)]">
         <g transform="translate(33.94181636640461 0.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="33.94181636640461" y="0.0" width="501.82964721256735" height="120.33333333333331">
             </rect>
           </clipPath>
@@ -359,7 +359,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (33.94181636640461, 130.33333333333331), (501.82964721256735, 120.33333333333331)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (33.94181636640461, 130.33333333333331), (501.82964721256735, 120.33333333333331)]">
         <g transform="translate(33.94181636640461 130.33333333333331 ) ">
           <g>
             <g>
@@ -439,7 +439,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="33.94181636640461" y="130.33333333333331" width="501.82964721256735" height="120.33333333333331">
             </rect>
           </clipPath>
@@ -552,7 +552,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (33.94181636640461, 260.66666666666663), (501.82964721256735, 120.33333333333331)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (33.94181636640461, 260.66666666666663), (501.82964721256735, 120.33333333333331)]">
         <g transform="translate(33.94181636640461 260.66666666666663 ) ">
           <g>
             <g>
@@ -809,7 +809,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="33.94181636640461" y="260.66666666666663" width="501.82964721256735" height="120.33333333333331">
             </rect>
           </clipPath>
@@ -907,6 +907,6 @@ font-size: 13.0px;
     <path fill="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 440.0 L705.0 440.0 L705.0 2.8421709430404007E-14 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 6eae1d020..74bb1f3e8 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.5 2.8421709430404007E-14 L1.5 440.0 L703.5 440.0 L703.5 2.8421709430404007E-14 Z">
     </path>
     <g transform="translate(31.0 6.500000000000028 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.94181636640461, 22.0), (255.41482360628368, 98.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.94181636640461, 22.0), (255.41482360628368, 98.33333333333333)]">
         <g transform="translate(33.94181636640461 22.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="33.94181636640461" y="22.0" width="255.41482360628368" height="98.33333333333333">
             </rect>
           </clipPath>
@@ -266,7 +266,7 @@ font-size: 13.0px;
         <g transform="translate(299.3566399726883 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (299.3566399726883, 22.0), (255.41482360628368, 98.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (299.3566399726883, 22.0), (255.41482360628368, 98.33333333333333)]">
         <g transform="translate(299.3566399726883 22.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="299.3566399726883" y="22.0" width="255.41482360628368" height="98.33333333333333">
             </rect>
           </clipPath>
@@ -554,7 +554,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (33.94181636640461, 152.33333333333331), (255.41482360628368, 98.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (33.94181636640461, 152.33333333333331), (255.41482360628368, 98.33333333333333)]">
         <g transform="translate(33.94181636640461 152.33333333333331 ) ">
           <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="33.94181636640461" y="152.33333333333331" width="255.41482360628368" height="98.33333333333333">
             </rect>
           </clipPath>
@@ -664,7 +664,7 @@ font-size: 13.0px;
         <g transform="translate(299.3566399726883 152.33333333333331 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (299.3566399726883, 152.33333333333331), (255.41482360628368, 98.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (299.3566399726883, 152.33333333333331), (255.41482360628368, 98.33333333333333)]">
         <g transform="translate(299.3566399726883 152.33333333333331 ) ">
           <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="299.3566399726883" y="152.33333333333331" width="255.41482360628368" height="98.33333333333333">
             </rect>
           </clipPath>
@@ -872,7 +872,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (33.94181636640461, 282.66666666666663), (255.41482360628368, 98.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (33.94181636640461, 282.66666666666663), (255.41482360628368, 98.33333333333333)]">
         <g transform="translate(33.94181636640461 282.66666666666663 ) ">
           <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="33.94181636640461" y="282.66666666666663" width="255.41482360628368" height="98.33333333333333">
             </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="M1.5 2.8421709430404007E-14 L1.5 440.0 L703.5 440.0 L703.5 2.8421709430404007E-14 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 a896fd6d7..3f7ce47a6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.5 2.8421709430404007E-14 L1.5 440.0 L703.5 440.0 L703.5 2.8421709430404007E-14 Z">
     </path>
     <g transform="translate(31.0 6.500000000000028 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.94181636640461, 22.0), (255.41482360628368, 98.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.94181636640461, 22.0), (255.41482360628368, 98.33333333333333)]">
         <g transform="translate(33.94181636640461 22.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="33.94181636640461" y="22.0" width="255.41482360628368" height="98.33333333333333">
             </rect>
           </clipPath>
@@ -266,7 +266,7 @@ font-size: 13.0px;
         <g transform="translate(299.3566399726883 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (299.3566399726883, 22.0), (255.41482360628368, 98.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (299.3566399726883, 22.0), (255.41482360628368, 98.33333333333333)]">
         <g transform="translate(299.3566399726883 22.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="299.3566399726883" y="22.0" width="255.41482360628368" height="98.33333333333333">
             </rect>
           </clipPath>
@@ -554,7 +554,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (33.94181636640461, 152.33333333333331), (255.41482360628368, 98.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (33.94181636640461, 152.33333333333331), (255.41482360628368, 98.33333333333333)]">
         <g transform="translate(33.94181636640461 152.33333333333331 ) ">
           <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="33.94181636640461" y="152.33333333333331" width="255.41482360628368" height="98.33333333333333">
             </rect>
           </clipPath>
@@ -664,7 +664,7 @@ font-size: 13.0px;
         <g transform="translate(299.3566399726883 152.33333333333331 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (299.3566399726883, 152.33333333333331), (255.41482360628368, 98.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (299.3566399726883, 152.33333333333331), (255.41482360628368, 98.33333333333333)]">
         <g transform="translate(299.3566399726883 152.33333333333331 ) ">
           <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="299.3566399726883" y="152.33333333333331" width="255.41482360628368" height="98.33333333333333">
             </rect>
           </clipPath>
@@ -872,7 +872,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (33.94181636640461, 282.66666666666663), (255.41482360628368, 98.33333333333333)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (33.94181636640461, 282.66666666666663), (255.41482360628368, 98.33333333333333)]">
         <g transform="translate(33.94181636640461 282.66666666666663 ) ">
           <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="33.94181636640461" y="282.66666666666663" width="255.41482360628368" height="98.33333333333333">
             </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="M1.5 2.8421709430404007E-14 L1.5 440.0 L703.5 440.0 L703.5 2.8421709430404007E-14 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 14b0dfc59..3082368c1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.5 0.0 L1.5 440.0 L703.5 440.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.0 6.5 ) ">
@@ -210,7 +210,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.94181636640461, 22.0), (238.44391542308136, 83.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.94181636640461, 22.0), (238.44391542308136, 83.0)]">
         <g transform="translate(33.94181636640461 22.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="33.94181636640461" y="22.0" width="238.44391542308136" height="83.0">
             </rect>
           </clipPath>
@@ -328,7 +328,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (316.3275481558906, 22.0), (238.44391542308136, 83.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (316.3275481558906, 22.0), (238.44391542308136, 83.0)]">
         <g transform="translate(316.3275481558906 22.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="316.3275481558906" y="22.0" width="238.44391542308136" height="83.0">
             </rect>
           </clipPath>
@@ -635,7 +635,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (33.94181636640461, 160.0), (238.44391542308136, 83.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (33.94181636640461, 160.0), (238.44391542308136, 83.0)]">
         <g transform="translate(33.94181636640461 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="33.94181636640461" y="160.0" width="238.44391542308136" height="83.0">
             </rect>
           </clipPath>
@@ -722,7 +722,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (316.3275481558906, 160.0), (238.44391542308136, 83.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (316.3275481558906, 160.0), (238.44391542308136, 83.0)]">
         <g transform="translate(316.3275481558906 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="316.3275481558906" y="160.0" width="238.44391542308136" height="83.0">
             </rect>
           </clipPath>
@@ -917,7 +917,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (33.94181636640461, 298.0), (238.44391542308136, 83.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (33.94181636640461, 298.0), (238.44391542308136, 83.0)]">
         <g transform="translate(33.94181636640461 298.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="33.94181636640461" y="298.0" width="238.44391542308136" height="83.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="M1.5 0.0 L1.5 440.0 L703.5 440.0 L703.5 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 a5e1e463d..43c826c9c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.5 0.0 L1.5 440.0 L703.5 440.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.0 6.5 ) ">
@@ -210,7 +210,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (33.94181636640461, 22.0), (238.44391542308136, 83.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (33.94181636640461, 22.0), (238.44391542308136, 83.0)]">
         <g transform="translate(33.94181636640461 22.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="33.94181636640461" y="22.0" width="238.44391542308136" height="83.0">
             </rect>
           </clipPath>
@@ -328,7 +328,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (316.3275481558906, 22.0), (238.44391542308136, 83.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (316.3275481558906, 22.0), (238.44391542308136, 83.0)]">
         <g transform="translate(316.3275481558906 22.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="316.3275481558906" y="22.0" width="238.44391542308136" height="83.0">
             </rect>
           </clipPath>
@@ -635,7 +635,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (33.94181636640461, 160.0), (238.44391542308136, 83.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (33.94181636640461, 160.0), (238.44391542308136, 83.0)]">
         <g transform="translate(33.94181636640461 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="33.94181636640461" y="160.0" width="238.44391542308136" height="83.0">
             </rect>
           </clipPath>
@@ -722,7 +722,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (316.3275481558906, 160.0), (238.44391542308136, 83.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (316.3275481558906, 160.0), (238.44391542308136, 83.0)]">
         <g transform="translate(316.3275481558906 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="316.3275481558906" y="160.0" width="238.44391542308136" height="83.0">
             </rect>
           </clipPath>
@@ -917,7 +917,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (33.94181636640461, 298.0), (238.44391542308136, 83.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (33.94181636640461, 298.0), (238.44391542308136, 83.0)]">
         <g transform="translate(33.94181636640461 298.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="33.94181636640461" y="298.0" width="238.44391542308136" height="83.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="M1.5 0.0 L1.5 440.0 L703.5 440.0 L703.5 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 ad6e4670f..6eab043ad 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (574.1662232980103, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (574.1662232980103, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="574.1662232980103" height="411.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 859786751..c83e5f999 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -309,7 +309,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (574.1662232980103, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (574.1662232980103, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="574.1662232980103" height="411.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 453f740b3..588a95b5d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (582.1468287534785, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (582.1468287534785, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="582.1468287534785" height="411.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 40fc0fd64..8eb26d584 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (582.1468287534785, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (582.1468287534785, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="582.1468287534785" height="411.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 4c5f514a1..c97d49c68 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="27.034701220281416" y="0.0" width="641.9652987797186" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="27.034701220281416" y="0.0" width="641.9652987797186" height="411.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 32eb5ccb9..90ad01ada 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="27.034701220281416" y="0.0" width="641.9652987797186" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="27.034701220281416" y="0.0" width="641.9652987797186" height="411.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 efc561eea..dbf20a83b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (582.1468287534785, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (582.1468287534785, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="582.1468287534785" height="411.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 c9332f865..e612e9396 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -347,7 +347,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (582.1468287534785, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (582.1468287534785, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="582.1468287534785" height="411.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 4194efe1b..2de9ab234 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="27.034701220281416" y="0.0" width="641.9652987797186" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="27.034701220281416" y="0.0" width="641.9652987797186" height="411.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 a308176aa..3fbfffe89 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -347,7 +347,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="27.034701220281416" y="0.0" width="641.9652987797186" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="27.034701220281416" y="0.0" width="641.9652987797186" height="411.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 2f867f457..db5308ab4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="411.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 c126eb926..e94e4cd0d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -281,7 +281,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="411.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 e6df4c5e8..e11858201 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (549.9249881559535, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (549.9249881559535, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="549.9249881559535" height="411.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 eaed20fa6..c3f68c094 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="557.9055936114218" height="411.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 c81657867..570bc6d61 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -347,7 +347,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="557.9055936114218" height="411.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 4731a200f..3d466f515 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (549.9249881559535, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (549.9249881559535, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="549.9249881559535" height="411.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 3ccab0848..966a4841b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="557.9055936114218" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="27.034701220281416" y="0.0" width="557.9055936114218" height="411.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 40aa70483..b025f149c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -296,7 +296,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="557.9055936114218" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="27.034701220281416" y="0.0" width="557.9055936114218" height="411.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 938e043f9..0bdb87e98 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (497.05178530975405, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (497.05178530975405, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="497.05178530975405" height="411.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 d35e39570..34565ccf2 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -314,7 +314,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (497.05178530975405, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (497.05178530975405, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="497.05178530975405" height="411.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 cbdaf6dcc..17a977447 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="557.9055936114218" height="411.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 10d732cbf..f682443e3 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -294,7 +294,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="557.9055936114218" height="411.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 b4346eadb..a948b037e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="557.9055936114218" height="411.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 b7f4907ab..8000bfd68 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (557.9055936114218, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="557.9055936114218" height="411.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 1162858db..fda7dcca0 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (545.3216152756337, 377.11014514264843)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (545.3216152756337, 377.11014514264843)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="545.3216152756337" height="377.11014514264843">
             </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 220444fa7..34dda072e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (545.3216152756337, 377.11014514264843)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (545.3216152756337, 377.11014514264843)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="545.3216152756337" height="377.11014514264843">
             </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 558cbfe31..4da73721f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.796181731634725, 0.0), (489.3339706766042, 396.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.796181731634725, 0.0), (489.3339706766042, 396.0)]">
         <g transform="translate(35.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="35.796181731634725" y="0.0" width="489.3339706766042" height="396.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 36275a0dd..48fa16bff 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -240,7 +240,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.796181731634725, 0.0), (489.3339706766042, 396.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.796181731634725, 0.0), (489.3339706766042, 396.0)]">
         <g transform="translate(35.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="35.796181731634725" y="0.0" width="489.3339706766042" height="396.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 ae3a1c32a..916280691 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 c9f28dd04..82ee328aa 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 7fd373ef6..cc7131ce0 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 412c22347..fcae6b04a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 73645ecc3..2b9f6a8da 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 c0b2a0224..ad17b9a58 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 b675def66..39fa3023f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 6c06010d6..1bcb565ac 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 a47002501..36620d242 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 de5cf137b..0015d2f56 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 b5e599f3a..708e983c4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="391.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 daca5f224..a3b9860ac 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="391.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 46a86a882..4e5ed1eee 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (692.0, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (692.0, 457.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="692.0" height="457.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 210c1e653..b30e0fa37 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (692.0, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (692.0, 457.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="692.0" height="457.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 d81ab814a..fb012b4be 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="799.9999999999999">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -237,7 +237,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -483,7 +483,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -510,7 +510,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="0.0">
@@ -525,117 +525,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -644,7 +644,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -781,7 +781,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1027,7 +1027,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -1056,7 +1056,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="267.99999999999994">
@@ -1071,117 +1071,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1190,7 +1190,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1327,7 +1327,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1573,7 +1573,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -1602,7 +1602,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="267.99999999999994">
@@ -1617,117 +1617,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1736,7 +1736,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1853,7 +1853,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 188.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2099,7 +2099,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="390.0387890890636" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -2126,7 +2126,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="535.9999999999999">
@@ -2141,117 +2141,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -2260,7 +2260,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -2373,7 +2373,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 184.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2619,7 +2619,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="21.961210910936405" y="0.0" width="390.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -2646,7 +2646,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="535.9999999999999">
@@ -2661,117 +2661,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -2780,7 +2780,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -2921,7 +2921,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -3167,7 +3167,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -3196,7 +3196,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 263.99999999999994 L448.0 263.99999999999994 L448.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 a8ac80a81..57d96a722 100644
--- a/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalLayoutPlotAllStyles_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="799.9999999999999">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -237,7 +237,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -483,7 +483,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -510,7 +510,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="0.0">
@@ -525,117 +525,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -644,7 +644,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -781,7 +781,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1027,7 +1027,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -1056,7 +1056,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="267.99999999999994">
@@ -1071,117 +1071,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1190,7 +1190,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1327,7 +1327,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1573,7 +1573,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx8">
+            <clipPath id="_sample_helper_static_id_prefix_8">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -1602,7 +1602,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="267.99999999999994">
@@ -1617,117 +1617,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1736,7 +1736,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -1853,7 +1853,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 188.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 188.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2099,7 +2099,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="390.0387890890636" height="188.99999999999994">
               </rect>
             </clipPath>
@@ -2126,7 +2126,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="0.0" y="535.9999999999999">
@@ -2141,117 +2141,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -2260,7 +2260,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -2373,7 +2373,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_14)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 184.99999999999994)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -2619,7 +2619,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx14">
+            <clipPath id="_sample_helper_static_id_prefix_14">
               <rect x="21.961210910936405" y="0.0" width="390.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -2646,7 +2646,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 263.99999999999994 L448.0 263.99999999999994 L448.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="448.0" height="263.99999999999994" x="452.0" y="535.9999999999999">
@@ -2661,117 +2661,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -2780,7 +2780,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 263.99999999999994 L448.0 263.99999999999994 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -2921,7 +2921,7 @@ font-size: 13.0px;
             </line>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx17)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_17)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (386.0387890890636, 184.99999999999994)]">
           <g transform="translate(25.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -3167,7 +3167,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx17">
+            <clipPath id="_sample_helper_static_id_prefix_17">
               <rect x="25.961210910936405" y="0.0" width="386.0387890890636" height="184.99999999999994">
               </rect>
             </clipPath>
@@ -3196,7 +3196,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 263.99999999999994 L448.0 263.99999999999994 L448.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 d59dca20d..0bcf895da 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -268,7 +268,7 @@ font-size: 13.0px;
           </line>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 415.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 415.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="647.0387890890636" height="415.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 99bd150e0..eec4abcfc 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -268,7 +268,7 @@ font-size: 13.0px;
           </line>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 415.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 415.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="647.0387890890636" height="415.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 f4f75921e..129c0081c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="400.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 c4a2e2404..daef0f281 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="400.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 9234eb5cd..c791e4c19 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -268,7 +268,7 @@ font-size: 13.0px;
           </line>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (643.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (643.0387890890636, 411.0)]">
         <g transform="translate(25.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="25.961210910936405" y="0.0" width="643.0387890890636" height="411.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 3a9a1328a..d89da7a2b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -268,7 +268,7 @@ font-size: 13.0px;
           </line>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (643.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (25.961210910936405, 0.0), (643.0387890890636, 411.0)]">
         <g transform="translate(25.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="25.961210910936405" y="0.0" width="643.0387890890636" height="411.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 d45687559..08e861ef0 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -151,7 +151,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (178.70222333164162, 78.0)]">
         <g transform="translate(21.961210910936405 22.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="21.961210910936405" y="22.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -230,7 +230,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (210.66343424257803, 22.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (210.66343424257803, 22.0), (178.70222333164162, 78.0)]">
         <g transform="translate(210.66343424257803 22.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="210.66343424257803" y="22.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -336,7 +336,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (399.36565757421965, 22.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (399.36565757421965, 22.0), (178.70222333164162, 78.0)]">
         <g transform="translate(399.36565757421965 22.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="399.36565757421965" y="22.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -390,7 +390,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 110.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 110.0), (178.70222333164162, 78.0)]">
         <g transform="translate(21.961210910936405 110.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="21.961210910936405" y="110.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -441,7 +441,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (210.66343424257803, 110.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (210.66343424257803, 110.0), (178.70222333164162, 78.0)]">
         <g transform="translate(210.66343424257803 110.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="210.66343424257803" y="110.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -489,7 +489,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (399.36565757421965, 110.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (399.36565757421965, 110.0), (178.70222333164162, 78.0)]">
         <g transform="translate(399.36565757421965 110.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="399.36565757421965" y="110.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -538,7 +538,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (21.961210910936405, 198.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (21.961210910936405, 198.0), (178.70222333164162, 78.0)]">
         <g transform="translate(21.961210910936405 198.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="21.961210910936405" y="198.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -621,7 +621,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (210.66343424257803, 198.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (210.66343424257803, 198.0), (178.70222333164162, 78.0)]">
         <g transform="translate(210.66343424257803 198.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="210.66343424257803" y="198.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -708,7 +708,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (399.36565757421965, 198.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (399.36565757421965, 198.0), (178.70222333164162, 78.0)]">
         <g transform="translate(399.36565757421965 198.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="399.36565757421965" y="198.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -761,7 +761,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (21.961210910936405, 286.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (21.961210910936405, 286.0), (178.70222333164162, 78.0)]">
         <g transform="translate(21.961210910936405 286.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="21.961210910936405" y="286.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -889,7 +889,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (210.66343424257803, 286.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (210.66343424257803, 286.0), (178.70222333164162, 78.0)]">
         <g transform="translate(210.66343424257803 286.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="210.66343424257803" y="286.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -963,7 +963,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (399.36565757421965, 286.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (399.36565757421965, 286.0), (178.70222333164162, 78.0)]">
         <g transform="translate(399.36565757421965 286.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="399.36565757421965" y="286.0" width="178.70222333164162" height="78.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 d15da92cc..db695f14e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.5 0.0 L1.5 423.0 L703.5 423.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.0 6.5 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (185.03555666497496, 342.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (185.03555666497496, 342.0)]">
         <g transform="translate(21.961210910936405 22.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="21.961210910936405" y="22.0" width="185.03555666497496" height="342.0">
             </rect>
           </clipPath>
@@ -392,7 +392,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (216.99676757591138, 22.0), (185.03555666497496, 342.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (216.99676757591138, 22.0), (185.03555666497496, 342.0)]">
         <g transform="translate(216.99676757591138 22.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="216.99676757591138" y="22.0" width="185.03555666497496" height="342.0">
             </rect>
           </clipPath>
@@ -574,7 +574,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (412.03232424088634, 22.0), (185.03555666497496, 342.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (412.03232424088634, 22.0), (185.03555666497496, 342.0)]">
         <g transform="translate(412.03232424088634 22.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="412.03232424088634" y="22.0" width="185.03555666497496" height="342.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="M1.5 0.0 L1.5 423.0 L703.5 423.0 L703.5 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 1ffd69155..7397d9da8 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.5 0.0 L1.5 423.0 L703.5 423.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(31.0 6.5 ) ">
@@ -236,7 +236,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (185.03555666497496, 342.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (185.03555666497496, 342.0)]">
         <g transform="translate(21.961210910936405 22.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="21.961210910936405" y="22.0" width="185.03555666497496" height="342.0">
             </rect>
           </clipPath>
@@ -416,7 +416,7 @@ font-size: 13.0px;
         <g transform="translate(216.99676757591138 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (216.99676757591138, 22.0), (185.03555666497496, 342.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (216.99676757591138, 22.0), (185.03555666497496, 342.0)]">
         <g transform="translate(216.99676757591138 22.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="216.99676757591138" y="22.0" width="185.03555666497496" height="342.0">
             </rect>
           </clipPath>
@@ -598,7 +598,7 @@ font-size: 13.0px;
         <g transform="translate(412.03232424088634 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (412.03232424088634, 22.0), (185.03555666497496, 342.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (412.03232424088634, 22.0), (185.03555666497496, 342.0)]">
         <g transform="translate(412.03232424088634 22.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="412.03232424088634" y="22.0" width="185.03555666497496" height="342.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="M1.5 0.0 L1.5 423.0 L703.5 423.0 L703.5 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 6fb3c3f84..7a2b6fa9b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -157,7 +157,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (556.1066699949249, 83.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (556.1066699949249, 83.5)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="556.1066699949249" height="83.5">
             </rect>
           </clipPath>
@@ -299,7 +299,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 93.5), (556.1066699949249, 83.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 93.5), (556.1066699949249, 83.5)]">
         <g transform="translate(21.961210910936405 93.5 ) ">
           <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="21.961210910936405" y="93.5" width="556.1066699949249" height="83.5">
             </rect>
           </clipPath>
@@ -365,7 +365,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 187.0), (556.1066699949249, 83.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 187.0), (556.1066699949249, 83.5)]">
         <g transform="translate(21.961210910936405 187.0 ) ">
           <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="21.961210910936405" y="187.0" width="556.1066699949249" height="83.5">
             </rect>
           </clipPath>
@@ -506,7 +506,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 280.5), (556.1066699949249, 83.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 280.5), (556.1066699949249, 83.5)]">
         <g transform="translate(21.961210910936405 280.5 ) ">
           <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="21.961210910936405" y="280.5" width="556.1066699949249" height="83.5">
             </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 07da7fcf6..2d5445612 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -168,7 +168,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (556.1066699949249, 83.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (556.1066699949249, 83.5)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="556.1066699949249" height="83.5">
             </rect>
           </clipPath>
@@ -310,7 +310,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 93.5), (556.1066699949249, 83.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 93.5), (556.1066699949249, 83.5)]">
         <g transform="translate(21.961210910936405 93.5 ) ">
           <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="21.961210910936405" y="93.5" width="556.1066699949249" height="83.5">
             </rect>
           </clipPath>
@@ -376,7 +376,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 187.0), (556.1066699949249, 83.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 187.0), (556.1066699949249, 83.5)]">
         <g transform="translate(21.961210910936405 187.0 ) ">
           <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="21.961210910936405" y="187.0" width="556.1066699949249" height="83.5">
             </rect>
           </clipPath>
@@ -573,7 +573,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 280.5), (556.1066699949249, 83.5)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 280.5), (556.1066699949249, 83.5)]">
         <g transform="translate(21.961210910936405 280.5 ) ">
           <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="21.961210910936405" y="280.5" width="556.1066699949249" height="83.5">
             </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 a17483892..4cfd2051f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -162,7 +162,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 22.0), (178.70222333164162, 78.0)]">
         <g transform="translate(21.961210910936405 22.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="21.961210910936405" y="22.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -234,7 +234,7 @@ font-size: 13.0px;
         <g transform="translate(210.66343424257803 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (210.66343424257803, 22.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (210.66343424257803, 22.0), (178.70222333164162, 78.0)]">
         <g transform="translate(210.66343424257803 22.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="210.66343424257803" y="22.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -340,7 +340,7 @@ font-size: 13.0px;
         <g transform="translate(399.36565757421965 22.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (399.36565757421965, 22.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (399.36565757421965, 22.0), (178.70222333164162, 78.0)]">
         <g transform="translate(399.36565757421965 22.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="399.36565757421965" y="22.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -401,7 +401,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 110.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 110.0), (178.70222333164162, 78.0)]">
         <g transform="translate(21.961210910936405 110.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="21.961210910936405" y="110.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -445,7 +445,7 @@ font-size: 13.0px;
         <g transform="translate(210.66343424257803 110.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (210.66343424257803, 110.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (210.66343424257803, 110.0), (178.70222333164162, 78.0)]">
         <g transform="translate(210.66343424257803 110.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="210.66343424257803" y="110.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -493,7 +493,7 @@ font-size: 13.0px;
         <g transform="translate(399.36565757421965 110.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (399.36565757421965, 110.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (399.36565757421965, 110.0), (178.70222333164162, 78.0)]">
         <g transform="translate(399.36565757421965 110.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="399.36565757421965" y="110.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -549,7 +549,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (21.961210910936405, 198.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (21.961210910936405, 198.0), (178.70222333164162, 78.0)]">
         <g transform="translate(21.961210910936405 198.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="21.961210910936405" y="198.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -625,7 +625,7 @@ font-size: 13.0px;
         <g transform="translate(210.66343424257803 198.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (210.66343424257803, 198.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (210.66343424257803, 198.0), (178.70222333164162, 78.0)]">
         <g transform="translate(210.66343424257803 198.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="210.66343424257803" y="198.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -712,7 +712,7 @@ font-size: 13.0px;
         <g transform="translate(399.36565757421965 198.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (399.36565757421965, 198.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (399.36565757421965, 198.0), (178.70222333164162, 78.0)]">
         <g transform="translate(399.36565757421965 198.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="399.36565757421965" y="198.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -801,7 +801,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (21.961210910936405, 286.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (21.961210910936405, 286.0), (178.70222333164162, 78.0)]">
         <g transform="translate(21.961210910936405 286.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="21.961210910936405" y="286.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -922,7 +922,7 @@ font-size: 13.0px;
         <g transform="translate(210.66343424257803 286.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (210.66343424257803, 286.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (210.66343424257803, 286.0), (178.70222333164162, 78.0)]">
         <g transform="translate(210.66343424257803 286.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="210.66343424257803" y="286.0" width="178.70222333164162" height="78.0">
             </rect>
           </clipPath>
@@ -996,7 +996,7 @@ font-size: 13.0px;
         <g transform="translate(399.36565757421965 286.0 ) ">
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (399.36565757421965, 286.0), (178.70222333164162, 78.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (399.36565757421965, 286.0), (178.70222333164162, 78.0)]">
         <g transform="translate(399.36565757421965 286.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="399.36565757421965" y="286.0" width="178.70222333164162" height="78.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 f8b02efb6..b16846275 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.4999999999999432 0.0 L1.4999999999999432 423.0 L703.5 423.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(30.999999999999943 6.5 ) ">
@@ -151,7 +151,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 41.0), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 41.0), (165.3212590816724, 25.25)]">
         <g transform="translate(27.034701220281416 41.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="27.034701220281416" y="41.0" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (229.39066152223523, 41.0), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (229.39066152223523, 41.0), (165.3212590816724, 25.25)]">
         <g transform="translate(229.39066152223523 41.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="229.39066152223523" y="41.0" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -411,7 +411,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (431.74662182418905, 41.0), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (431.74662182418905, 41.0), (165.3212590816724, 25.25)]">
         <g transform="translate(431.74662182418905 41.0 ) ">
           <g>
             <g>
@@ -423,7 +423,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="431.74662182418905" y="41.0" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -499,7 +499,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (27.034701220281416, 140.25), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (27.034701220281416, 140.25), (165.3212590816724, 25.25)]">
         <g transform="translate(27.034701220281416 140.25 ) ">
           <g>
             <g>
@@ -534,7 +534,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="27.034701220281416" y="140.25" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -601,7 +601,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (229.39066152223523, 140.25), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (229.39066152223523, 140.25), (165.3212590816724, 25.25)]">
         <g transform="translate(229.39066152223523 140.25 ) ">
           <g>
             <g>
@@ -614,7 +614,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="229.39066152223523" y="140.25" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -681,7 +681,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (431.74662182418905, 140.25), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (431.74662182418905, 140.25), (165.3212590816724, 25.25)]">
         <g transform="translate(431.74662182418905 140.25 ) ">
           <g>
             <g>
@@ -736,7 +736,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="431.74662182418905" y="140.25" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -805,7 +805,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (27.034701220281416, 239.5), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (27.034701220281416, 239.5), (165.3212590816724, 25.25)]">
         <g transform="translate(27.034701220281416 239.5 ) ">
           <g>
             <g>
@@ -821,7 +821,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="27.034701220281416" y="239.5" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -897,7 +897,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (229.39066152223523, 239.5), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (229.39066152223523, 239.5), (165.3212590816724, 25.25)]">
         <g transform="translate(229.39066152223523 239.5 ) ">
           <g>
             <g>
@@ -966,7 +966,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="229.39066152223523" y="239.5" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -1035,7 +1035,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (431.74662182418905, 239.5), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (431.74662182418905, 239.5), (165.3212590816724, 25.25)]">
         <g transform="translate(431.74662182418905 239.5 ) ">
           <g>
             <g>
@@ -1068,7 +1068,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="431.74662182418905" y="239.5" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -1146,7 +1146,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (27.034701220281416, 338.75), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (27.034701220281416, 338.75), (165.3212590816724, 25.25)]">
         <g transform="translate(27.034701220281416 338.75 ) ">
           <g>
             <g>
@@ -1162,7 +1162,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="27.034701220281416" y="338.75" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -1240,7 +1240,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (229.39066152223523, 338.75), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (229.39066152223523, 338.75), (165.3212590816724, 25.25)]">
         <g transform="translate(229.39066152223523 338.75 ) ">
           <g>
             <g>
@@ -1252,7 +1252,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="229.39066152223523" y="338.75" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -1330,7 +1330,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (431.74662182418905, 338.75), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (431.74662182418905, 338.75), (165.3212590816724, 25.25)]">
         <g transform="translate(431.74662182418905 338.75 ) ">
           <g>
             <g>
@@ -1342,7 +1342,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="431.74662182418905" y="338.75" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -1584,6 +1584,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M1.4999999999999432 0.0 L1.4999999999999432 423.0 L703.5 423.0 L703.5 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_dark.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotFacetingWrap_dark.svg
index b7aae638b..fded29c58 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.4999999999999432 0.0 L1.4999999999999432 423.0 L703.5 423.0 L703.5 0.0 Z">
     </path>
     <g transform="translate(30.999999999999943 6.5 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 41.0), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 41.0), (165.3212590816724, 25.25)]">
         <g transform="translate(27.034701220281416 41.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="27.034701220281416" y="41.0" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -329,7 +329,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (229.39066152223523, 41.0), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (229.39066152223523, 41.0), (165.3212590816724, 25.25)]">
         <g transform="translate(229.39066152223523 41.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="229.39066152223523" y="41.0" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -451,7 +451,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (431.74662182418905, 41.0), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (431.74662182418905, 41.0), (165.3212590816724, 25.25)]">
         <g transform="translate(431.74662182418905 41.0 ) ">
           <g>
             <g>
@@ -463,7 +463,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="431.74662182418905" y="41.0" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -530,7 +530,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (27.034701220281416, 140.25), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (27.034701220281416, 140.25), (165.3212590816724, 25.25)]">
         <g transform="translate(27.034701220281416 140.25 ) ">
           <g>
             <g>
@@ -565,7 +565,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="27.034701220281416" y="140.25" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -632,7 +632,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (229.39066152223523, 140.25), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (229.39066152223523, 140.25), (165.3212590816724, 25.25)]">
         <g transform="translate(229.39066152223523 140.25 ) ">
           <g>
             <g>
@@ -645,7 +645,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="229.39066152223523" y="140.25" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -712,7 +712,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (431.74662182418905, 140.25), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (431.74662182418905, 140.25), (165.3212590816724, 25.25)]">
         <g transform="translate(431.74662182418905 140.25 ) ">
           <g>
             <g>
@@ -767,7 +767,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="431.74662182418905" y="140.25" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -845,7 +845,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (27.034701220281416, 239.5), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (27.034701220281416, 239.5), (165.3212590816724, 25.25)]">
         <g transform="translate(27.034701220281416 239.5 ) ">
           <g>
             <g>
@@ -861,7 +861,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="27.034701220281416" y="239.5" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -928,7 +928,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (229.39066152223523, 239.5), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (229.39066152223523, 239.5), (165.3212590816724, 25.25)]">
         <g transform="translate(229.39066152223523 239.5 ) ">
           <g>
             <g>
@@ -997,7 +997,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx8">
+          <clipPath id="_sample_helper_static_id_prefix_8">
             <rect x="229.39066152223523" y="239.5" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -1075,7 +1075,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx9)" clip-bounds-jfx="[rect (431.74662182418905, 239.5), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_9)" clip-bounds-jfx="[rect (431.74662182418905, 239.5), (165.3212590816724, 25.25)]">
         <g transform="translate(431.74662182418905 239.5 ) ">
           <g>
             <g>
@@ -1108,7 +1108,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx9">
+          <clipPath id="_sample_helper_static_id_prefix_9">
             <rect x="431.74662182418905" y="239.5" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -1186,7 +1186,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx10)" clip-bounds-jfx="[rect (27.034701220281416, 338.75), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_10)" clip-bounds-jfx="[rect (27.034701220281416, 338.75), (165.3212590816724, 25.25)]">
         <g transform="translate(27.034701220281416 338.75 ) ">
           <g>
             <g>
@@ -1202,7 +1202,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx10">
+          <clipPath id="_sample_helper_static_id_prefix_10">
             <rect x="27.034701220281416" y="338.75" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -1280,7 +1280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx11)" clip-bounds-jfx="[rect (229.39066152223523, 338.75), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_11)" clip-bounds-jfx="[rect (229.39066152223523, 338.75), (165.3212590816724, 25.25)]">
         <g transform="translate(229.39066152223523 338.75 ) ">
           <g>
             <g>
@@ -1292,7 +1292,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx11">
+          <clipPath id="_sample_helper_static_id_prefix_11">
             <rect x="229.39066152223523" y="338.75" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -1370,7 +1370,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx12)" clip-bounds-jfx="[rect (431.74662182418905, 338.75), (165.3212590816724, 25.25)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_12)" clip-bounds-jfx="[rect (431.74662182418905, 338.75), (165.3212590816724, 25.25)]">
         <g transform="translate(431.74662182418905 338.75 ) ">
           <g>
             <g>
@@ -1382,7 +1382,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx12">
+          <clipPath id="_sample_helper_static_id_prefix_12">
             <rect x="431.74662182418905" y="338.75" width="165.3212590816724" height="25.25">
             </rect>
           </clipPath>
@@ -1584,6 +1584,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M1.4999999999999432 0.0 L1.4999999999999432 423.0 L703.5 423.0 L703.5 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/experimentalMultiplotPlotBunch.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch.svg
index 04428f527..63a62dac6 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch.svg
@@ -11,117 +11,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -141,117 +141,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx3 .plot-title {
+#_sample_helper_static_id_prefix_3 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx3 .plot-subtitle {
+#_sample_helper_static_id_prefix_3 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .plot-caption {
+#_sample_helper_static_id_prefix_3 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .hyperlink-element {
+#_sample_helper_static_id_prefix_3 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx3 .legend-title {
+#_sample_helper_static_id_prefix_3 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .legend-item {
+#_sample_helper_static_id_prefix_3 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-x {
+#_sample_helper_static_id_prefix_3 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-x {
+#_sample_helper_static_id_prefix_3 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-y {
+#_sample_helper_static_id_prefix_3 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-y {
+#_sample_helper_static_id_prefix_3 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -271,117 +271,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx6 .plot-title {
+#_sample_helper_static_id_prefix_6 .plot-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx6 .plot-subtitle {
+#_sample_helper_static_id_prefix_6 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .plot-caption {
+#_sample_helper_static_id_prefix_6 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .hyperlink-element {
+#_sample_helper_static_id_prefix_6 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx6 .legend-title {
+#_sample_helper_static_id_prefix_6 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .legend-item {
+#_sample_helper_static_id_prefix_6 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-title-x {
+#_sample_helper_static_id_prefix_6 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .axis-text-x {
+#_sample_helper_static_id_prefix_6 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-title-y {
+#_sample_helper_static_id_prefix_6 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .axis-text-y {
+#_sample_helper_static_id_prefix_6 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_6 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_6 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -391,7 +391,7 @@ font-size: 13.0px;
 
   
 </style>
-<g transform="translate(0.0 0.0)" id="xXxprefixXx0">
+<g transform="translate(0.0 0.0)" 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 200.0 L400.0 200.0 L400.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -417,7 +417,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (334.0581836335954, 141.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (334.0581836335954, 141.0)]">
         <g transform="translate(29.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -431,7 +431,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="334.0581836335954" height="141.0">
             </rect>
           </clipPath>
@@ -507,10 +507,10 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 200.0 L400.0 200.0 L400.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 
-<g transform="translate(400.0 0.0)" id="xXxprefixXx3">
+<g transform="translate(400.0 0.0)" id="_sample_helper_static_id_prefix_3">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 200.0 L300.0 200.0 L300.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -536,7 +536,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (184.08727545039307, 141.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (184.08727545039307, 141.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -562,7 +562,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="21.961210910936405" y="0.0" width="184.08727545039307" height="141.0">
             </rect>
           </clipPath>
@@ -711,10 +711,10 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 200.0 L300.0 200.0 L300.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx5">
+  <g id="_sample_helper_static_id_prefix_5">
   </g>
 
-<g transform="translate(0.0 200.0)" id="xXxprefixXx6">
+<g transform="translate(0.0 200.0)" id="_sample_helper_static_id_prefix_6">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 300.0 L700.0 300.0 L700.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -752,7 +752,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (563.1066699949249, 241.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (563.1066699949249, 241.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -997,7 +997,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="21.961210910936405" y="0.0" width="563.1066699949249" height="241.0">
             </rect>
           </clipPath>
@@ -1243,7 +1243,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 300.0 L700.0 300.0 L700.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx8">
+  <g id="_sample_helper_static_id_prefix_8">
   </g>
 
 </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 6fb64f4ff..0db077692 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotBunch_dark.svg
@@ -11,117 +11,117 @@
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx0 .plot-title {
+#_sample_helper_static_id_prefix_0 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -141,117 +141,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx3 .plot-title {
+#_sample_helper_static_id_prefix_3 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx3 .plot-subtitle {
+#_sample_helper_static_id_prefix_3 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .plot-caption {
+#_sample_helper_static_id_prefix_3 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .hyperlink-element {
+#_sample_helper_static_id_prefix_3 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx3 .legend-title {
+#_sample_helper_static_id_prefix_3 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .legend-item {
+#_sample_helper_static_id_prefix_3 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-x {
+#_sample_helper_static_id_prefix_3 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-x {
+#_sample_helper_static_id_prefix_3 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .axis-title-y {
+#_sample_helper_static_id_prefix_3 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx3 .axis-text-y {
+#_sample_helper_static_id_prefix_3 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx3 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_3 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -271,117 +271,117 @@ font-size: 13.0px;
 text {
    text-rendering: optimizeLegibility;
 }
-#xXxprefixXx6 .plot-title {
+#_sample_helper_static_id_prefix_6 .plot-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx6 .plot-subtitle {
+#_sample_helper_static_id_prefix_6 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .plot-caption {
+#_sample_helper_static_id_prefix_6 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .hyperlink-element {
+#_sample_helper_static_id_prefix_6 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx6 .legend-title {
+#_sample_helper_static_id_prefix_6 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .legend-item {
+#_sample_helper_static_id_prefix_6 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-title-x {
+#_sample_helper_static_id_prefix_6 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .axis-text-x {
+#_sample_helper_static_id_prefix_6 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .axis-title-y {
+#_sample_helper_static_id_prefix_6 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx6 .axis-text-y {
+#_sample_helper_static_id_prefix_6 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_6 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx6 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_6 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -391,7 +391,7 @@ font-size: 13.0px;
 
   
 </style>
-<g transform="translate(0.0 0.0)" id="xXxprefixXx0">
+<g transform="translate(0.0 0.0)" 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 200.0 L400.0 200.0 L400.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -471,7 +471,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (334.0581836335954, 141.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (334.0581836335954, 141.0)]">
         <g transform="translate(29.941816366404606 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="29.941816366404606" y="0.0" width="334.0581836335954" height="141.0">
             </rect>
           </clipPath>
@@ -507,10 +507,10 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 200.0 L400.0 200.0 L400.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx2">
+  <g id="_sample_helper_static_id_prefix_2">
   </g>
 
-<g transform="translate(400.0 0.0)" id="xXxprefixXx3">
+<g transform="translate(400.0 0.0)" id="_sample_helper_static_id_prefix_3">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 200.0 L300.0 200.0 L300.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -590,7 +590,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (184.08727545039307, 141.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_4)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (184.08727545039307, 141.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -616,7 +616,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="21.961210910936405" y="0.0" width="184.08727545039307" height="141.0">
             </rect>
           </clipPath>
@@ -711,10 +711,10 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 200.0 L300.0 200.0 L300.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx5">
+  <g id="_sample_helper_static_id_prefix_5">
   </g>
 
-<g transform="translate(0.0 200.0)" id="xXxprefixXx6">
+<g transform="translate(0.0 200.0)" id="_sample_helper_static_id_prefix_6">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 0.0 L0.0 300.0 L700.0 300.0 L700.0 0.0 Z">
     </path>
     <g transform="translate(29.5 6.5 ) ">
@@ -854,7 +854,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx7)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (563.1066699949249, 241.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_7)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (563.1066699949249, 241.0)]">
         <g transform="translate(21.961210910936405 0.0 ) ">
           <g>
             <g>
@@ -1099,7 +1099,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx7">
+          <clipPath id="_sample_helper_static_id_prefix_7">
             <rect x="21.961210910936405" y="0.0" width="563.1066699949249" height="241.0">
             </rect>
           </clipPath>
@@ -1243,7 +1243,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 300.0 L700.0 300.0 L700.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <g id="xXxprefixXx8">
+  <g id="_sample_helper_static_id_prefix_8">
   </g>
 
 </svg>
\ No newline at end of file
diff --git a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid.svg b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid.svg
index 2c751e507..ba08c30fb 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="600.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 6.5 ) ">
@@ -166,7 +166,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (311.10666999492486, 239.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (311.10666999492486, 239.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -411,7 +411,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="311.10666999492486" height="239.0">
               </rect>
             </clipPath>
@@ -630,7 +630,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="452.0" y="0.0">
@@ -645,117 +645,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -764,7 +764,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 6.5 ) ">
@@ -796,7 +796,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (382.0581836335954, 239.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (382.0581836335954, 239.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -810,7 +810,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="382.0581836335954" height="239.0">
               </rect>
             </clipPath>
@@ -907,7 +907,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="0.0" y="302.0">
@@ -922,117 +922,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1041,7 +1041,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 6.5 ) ">
@@ -1071,7 +1071,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 239.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 239.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1097,7 +1097,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="332.08727545039307" height="239.0">
               </rect>
             </clipPath>
@@ -1260,7 +1260,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 298.0 L448.0 298.0 L448.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 16588963c..6d22bec91 100644
--- a/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalMultiplotPlotGrid_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="600.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 6.5 ) ">
@@ -241,7 +241,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (311.10666999492486, 239.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (311.10666999492486, 239.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -486,7 +486,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="311.10666999492486" height="239.0">
               </rect>
             </clipPath>
@@ -630,7 +630,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="452.0" y="0.0">
@@ -645,117 +645,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -764,7 +764,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 6.5 ) ">
@@ -871,7 +871,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (382.0581836335954, 239.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (382.0581836335954, 239.0)]">
           <g transform="translate(29.941816366404606 0.0 ) ">
             <g>
               <g>
@@ -885,7 +885,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="382.0581836335954" height="239.0">
               </rect>
             </clipPath>
@@ -907,7 +907,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 298.0 L448.0 298.0 L448.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="448.0" height="298.0" x="0.0" y="302.0">
@@ -922,117 +922,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -1041,7 +1041,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 298.0 L448.0 298.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 6.5 ) ">
@@ -1139,7 +1139,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 239.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_8)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (332.08727545039307, 239.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -1165,7 +1165,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="332.08727545039307" height="239.0">
               </rect>
             </clipPath>
@@ -1260,7 +1260,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 298.0 L448.0 298.0 L448.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 589fab8ab..eaea445f8 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 c95d432dc..7a54a9c29 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 5d19e17a6..fbd082178 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (584.0137851410482, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (584.0137851410482, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="584.0137851410482" height="411.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 a76142529..13db74b71 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (584.0137851410482, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (584.0137851410482, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="584.0137851410482" height="411.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 984038dfd..0bcd6b5e1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 e560f52a2..9fe9b336a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 17bc60497..cae2b8f8d 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 6.5 ) ">
@@ -172,7 +172,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (384.9652987797186, 341.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (384.9652987797186, 341.0)]">
           <g transform="translate(27.034701220281416 0.0 ) ">
             <g>
               <g>
@@ -204,7 +204,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="27.034701220281416" y="0.0" width="384.9652987797186" height="341.0">
               </rect>
             </clipPath>
@@ -328,7 +328,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -343,117 +343,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -462,7 +462,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 6.5 ) ">
@@ -502,7 +502,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 341.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 341.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -550,7 +550,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="390.0387890890636" height="341.0">
               </rect>
             </clipPath>
@@ -681,7 +681,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 400.0 L448.0 400.0 L448.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 84fe17ff1..444fda73a 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinOnIterableData_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 6.5 ) ">
@@ -274,7 +274,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (384.9652987797186, 341.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (384.9652987797186, 341.0)]">
           <g transform="translate(27.034701220281416 0.0 ) ">
             <g>
               <g>
@@ -306,7 +306,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="27.034701220281416" y="0.0" width="384.9652987797186" height="341.0">
               </rect>
             </clipPath>
@@ -328,7 +328,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -343,117 +343,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -462,7 +462,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 6.5 ) ">
@@ -611,7 +611,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 341.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 341.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -659,7 +659,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="390.0387890890636" height="341.0">
               </rect>
             </clipPath>
@@ -681,7 +681,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 400.0 L448.0 400.0 L448.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 af9fcd788..81a8fc590 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -174,7 +174,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -222,7 +222,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -358,7 +358,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -373,117 +373,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -492,7 +492,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -532,7 +532,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -580,7 +580,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="390.0387890890636" height="321.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 400.0 L448.0 400.0 L448.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 f47dbdd5c..08ecdf6ef 100644
--- a/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist_dark.svg
+++ b/docs/images/guides/quickStartGuide/experimentalStatisticsStatBinsAndHist_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="900.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -283,7 +283,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -331,7 +331,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="390.0387890890636" height="321.0">
               </rect>
             </clipPath>
@@ -358,7 +358,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 400.0 L448.0 400.0 L448.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="448.0" height="400.0" x="452.0" y="0.0">
@@ -373,117 +373,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -492,7 +492,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 400.0 L448.0 400.0 L448.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -641,7 +641,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (390.0387890890636, 321.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -689,7 +689,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="390.0387890890636" height="321.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 400.0 L448.0 400.0 L448.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 b014465bb..7f824825e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 87a1d4565..17a3efa5f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 b014465bb..7f824825e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 87a1d4565..17a3efa5f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 b014465bb..7f824825e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 87a1d4565..17a3efa5f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 b014465bb..7f824825e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 87a1d4565..17a3efa5f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -278,7 +278,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 7d66f280c..6eca3c488 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 93ec719b5..1ee78f86c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -389,7 +389,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 aa16f9e0b..56309dd34 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 356cf28ff..4200d2b73 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -290,7 +290,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 b4515abff..c4e34c13e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 b137e2836..2e717b49f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -290,7 +290,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 1a7638d27..24b66acfc 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -165,7 +165,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 9dbea5b4d..abae8606c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -254,7 +254,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 7d66f280c..6eca3c488 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -191,7 +191,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 93ec719b5..1ee78f86c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -389,7 +389,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 a89bf2615..c0b0ecef5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (572.1622018028038, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (572.1622018028038, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="572.1622018028038" height="411.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 f9d5a8f84..94f29b7f9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -323,7 +323,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (572.1622018028038, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (572.1622018028038, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="572.1622018028038" height="411.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 a89bf2615..c0b0ecef5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (572.1622018028038, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (572.1622018028038, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="572.1622018028038" height="411.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 f9d5a8f84..94f29b7f9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -323,7 +323,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (572.1622018028038, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (572.1622018028038, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="572.1622018028038" height="411.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 c0d361289..702c05123 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 d89350395..fb5e7b5ae 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -290,7 +290,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 1e787a44e..73b1e2f15 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (568.1066699949249, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (568.1066699949249, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="568.1066699949249" height="411.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 8664b9994..1cdacb4ab 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -269,7 +269,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (568.1066699949249, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (568.1066699949249, 411.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="568.1066699949249" height="411.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 651c62c3a..186cb8c39 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 344.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 344.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="344.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="589.0872754503931" height="344.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 89ad0a882..3a6e8175d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 344.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 344.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="344.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="589.0872754503931" height="344.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 b16221bdc..1f711eef5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 6d67d5bf1..da5404402 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 90318132e..6cd942a43 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 88896e846..6232176af 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 7525f5a0c..b132544ba 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 e4a1f95b4..9b3290180 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 065c16058..224ca15cf 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 5f5516ce4..d568905b2 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 90318132e..6cd942a43 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 88896e846..6232176af 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 90318132e..6cd942a43 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 88896e846..6232176af 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 ad53e26e8..865f103a1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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/guideCandlestickCandlestickPlotConfigured.svg b/docs/images/guides/stat/guideCandlestickCandlestickPlotConfigured.svg
index 60c422ab1..567b7d23c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 273.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 273.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="273.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 7973b3f6f..b2f36b895 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 273.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 273.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="273.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 29e830c31..25432a0e7 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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/guideCandlestickCompareBoxesVsCandlestick.svg b/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick.svg
index ae13f2c7d..d435fd60d 100644
--- a/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick.svg
+++ b/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="235.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -164,7 +164,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -222,7 +222,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="292.5387890890636" height="156.0">
               </rect>
             </clipPath>
@@ -321,7 +321,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 235.0 L350.5 235.0 L350.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="350.5" height="235.0" x="354.5" y="0.0">
@@ -336,117 +336,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -455,7 +455,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -485,7 +485,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -543,7 +543,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="292.5387890890636" height="156.0">
               </rect>
             </clipPath>
@@ -642,7 +642,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 235.0 L350.5 235.0 L350.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 0166da265..d928b43a2 100644
--- a/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick_dark.svg
+++ b/docs/images/guides/stat/guideCandlestickCompareBoxesVsCandlestick_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="235.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -236,7 +236,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -294,7 +294,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="292.5387890890636" height="156.0">
               </rect>
             </clipPath>
@@ -321,7 +321,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 235.0 L350.5 235.0 L350.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="350.5" height="235.0" x="354.5" y="0.0">
@@ -336,117 +336,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -455,7 +455,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -557,7 +557,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -615,7 +615,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="292.5387890890636" height="156.0">
               </rect>
             </clipPath>
@@ -642,7 +642,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 235.0 L350.5 235.0 L350.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 c08b96600..42660e5df 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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/guideCandlestickLayerCustomizationDSL_dark.svg b/docs/images/guides/stat/guideCandlestickLayerCustomizationDSL_dark.svg
index 40dc86ef9..2b8135490 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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/guideCandlestickLayerCustomizationStatAPI.svg b/docs/images/guides/stat/guideCandlestickLayerCustomizationStatAPI.svg
index a5a6e6c22..281283d09 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (536.1301524082389, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (536.1301524082389, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="536.1301524082389" height="411.0">
             </rect>
           </clipPath>
@@ -397,6 +397,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 f52b3dbdd..7f37ad0e1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (536.1301524082389, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (536.1301524082389, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="536.1301524082389" height="411.0">
             </rect>
           </clipPath>
@@ -397,6 +397,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 26969b793..854af94e4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 3a30b2660..357686f9a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 afbb6e25d..0cd1ef816 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 4b6615b88..0d091b00e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 1e1a019e3..3de254d6e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 51c51f3a1..91addf142 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -303,7 +303,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 0472938d7..02b2a1ab3 100644
--- a/docs/images/guides/stat/guideCountBarsVsCountPlot.svg
+++ b/docs/images/guides/stat/guideCountBarsVsCountPlot.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="235.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -166,7 +166,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 88.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 88.71618656967037)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -188,7 +188,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="292.5387890890636" height="88.71618656967037">
               </rect>
             </clipPath>
@@ -298,7 +298,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 235.0 L350.5 235.0 L350.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="350.5" height="235.0" x="354.5" y="0.0">
@@ -313,117 +313,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -432,7 +432,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -464,7 +464,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 88.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 88.71618656967037)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -486,7 +486,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="292.5387890890636" height="88.71618656967037">
               </rect>
             </clipPath>
@@ -596,7 +596,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 235.0 L350.5 235.0 L350.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 39899045c..24164eb48 100644
--- a/docs/images/guides/stat/guideCountBarsVsCountPlot_dark.svg
+++ b/docs/images/guides/stat/guideCountBarsVsCountPlot_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="235.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -249,7 +249,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 88.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 88.71618656967037)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -271,7 +271,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="292.5387890890636" height="88.71618656967037">
               </rect>
             </clipPath>
@@ -298,7 +298,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 235.0 L350.5 235.0 L350.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="350.5" height="235.0" x="354.5" y="0.0">
@@ -313,117 +313,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -432,7 +432,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -547,7 +547,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 88.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 88.71618656967037)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -569,7 +569,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="292.5387890890636" height="88.71618656967037">
               </rect>
             </clipPath>
@@ -596,7 +596,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 235.0 L350.5 235.0 L350.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 6cfb115ae..5ea2d0d42 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 2e5943d56..003f9330f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 73a4bd2ad..79b60df43 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 316.4)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 316.4)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="516.7840674755316" height="316.4">
             </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 27a9e0be2..83c85f8bd 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 316.4)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 316.4)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="516.7840674755316" height="316.4">
             </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 71b142e82..c6ce0afbd 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 98c2e680c..6e5ed0e6d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 8e0c0fe49..4ceab2bf5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 94a388612..f33940458 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 8e0c0fe49..4ceab2bf5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 94a388612..f33940458 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 b0a469247..316417e56 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 aec0b07c8..46f55ed92 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 cf960403d..0f8df5810 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 7f0e132ef..451a23145 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 ad4e46ee0..a10545702 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="411.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 5d9765760..7f9df3f76 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -263,7 +263,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="411.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 056e4da94..4c8d62695 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="626.0040878687822" height="411.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 37944e187..a118ecc90 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="626.0040878687822" height="411.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 66fb0fc61..3750b927c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 3286d513c..53a1c916d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 8e0c0fe49..4ceab2bf5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 94a388612..f33940458 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 3a21eb92c..b089fe396 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 71a27e8ca..9056d1d5c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 1f0e446b8..c5bfeff1c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 ba1994e8e..6c6aaf30a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 ff4ec9dde..da089f893 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 561d504cc..0f6c63b9e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 5de84e3bd..374bcadcc 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 343.71618656967036)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 343.71618656967036)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="516.7840674755316" height="343.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 bfa85e96c..98cef87cd 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 343.71618656967036)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (516.7840674755316, 343.71618656967036)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="516.7840674755316" height="343.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 234b39083..5d9bcd6c3 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="626.0040878687822" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="42.99591213121782" y="0.0" width="626.0040878687822" height="411.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 183df3f64..03e928fc9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="626.0040878687822" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="42.99591213121782" y="0.0" width="626.0040878687822" height="411.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 3462aa364..cebfeb71e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 28.835757089194004 L0.0 382.164242910806 L705.0 382.164242910806 L705.0 28.835757089194004 Z">
     </path>
     <g transform="translate(29.5 55.335757089194004 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="597.0678809058613" height="274.328485821612">
             </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 28.835757089194004 L0.0 382.164242910806 L705.0 382.164242910806 L705.0 28.835757089194004 Z" pointer-events="none">
     </path>
   </g>
-  <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 b726c4a6b..314513b7a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 28.835757089194004 L0.0 382.164242910806 L705.0 382.164242910806 L705.0 28.835757089194004 Z">
     </path>
     <g transform="translate(29.5 55.335757089194004 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="597.0678809058613" height="274.328485821612">
             </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 28.835757089194004 L0.0 382.164242910806 L705.0 382.164242910806 L705.0 28.835757089194004 Z" pointer-events="none">
     </path>
   </g>
-  <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 54721c84a..7af63768b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 58.335757089194004 L0.0 411.664242910806 L705.0 411.664242910806 L705.0 58.335757089194004 Z">
     </path>
     <g transform="translate(29.5 84.835757089194 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="597.0678809058613" height="274.328485821612">
             </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 58.335757089194004 L0.0 411.664242910806 L705.0 411.664242910806 L705.0 58.335757089194004 Z" pointer-events="none">
     </path>
   </g>
-  <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 0528e863e..8cf9bc252 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 58.335757089194004 L0.0 411.664242910806 L705.0 411.664242910806 L705.0 58.335757089194004 Z">
     </path>
     <g transform="translate(29.5 84.835757089194 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="597.0678809058613" height="274.328485821612">
             </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 58.335757089194004 L0.0 411.664242910806 L705.0 411.664242910806 L705.0 58.335757089194004 Z" pointer-events="none">
     </path>
   </g>
-  <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 8bffb4183..ce3bbd3df 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 68.335757089194 L0.0 401.664242910806 L705.0 401.664242910806 L705.0 68.335757089194 Z">
     </path>
     <g transform="translate(29.5 74.835757089194 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="597.0678809058613" height="274.328485821612">
             </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 68.335757089194 L0.0 401.664242910806 L705.0 401.664242910806 L705.0 68.335757089194 Z" pointer-events="none">
     </path>
   </g>
-  <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 9a71afafc..86e42bd4b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 68.335757089194 L0.0 401.664242910806 L705.0 401.664242910806 L705.0 68.335757089194 Z">
     </path>
     <g transform="translate(29.5 74.835757089194 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="597.0678809058613" height="274.328485821612">
             </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 68.335757089194 L0.0 401.664242910806 L705.0 401.664242910806 L705.0 68.335757089194 Z" pointer-events="none">
     </path>
   </g>
-  <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 ba3dd9385..6a9cb8a50 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 77.40929414956858 L0.0 392.5907058504314 L705.0 392.5907058504314 L705.0 77.40929414956858 Z">
     </path>
     <g transform="translate(29.5 83.90929414956858 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (523.6183666430544, 240.58141170086284)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (523.6183666430544, 240.58141170086284)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="523.6183666430544" height="240.58141170086284">
             </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 77.40929414956858 L0.0 392.5907058504314 L705.0 392.5907058504314 L705.0 77.40929414956858 Z" pointer-events="none">
     </path>
   </g>
-  <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 82e6fe8ec..98799e578 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 77.40929414956858 L0.0 392.5907058504314 L705.0 392.5907058504314 L705.0 77.40929414956858 Z">
     </path>
     <g transform="translate(29.5 83.90929414956858 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (523.6183666430544, 240.58141170086284)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (523.6183666430544, 240.58141170086284)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="523.6183666430544" height="240.58141170086284">
             </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 77.40929414956858 L0.0 392.5907058504314 L705.0 392.5907058504314 L705.0 77.40929414956858 Z" pointer-events="none">
     </path>
   </g>
-  <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 d7c7e44d2..2947d47b2 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (544.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (544.0872754503931, 411.0)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="544.0872754503931" height="411.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 7fbf57345..c1a2b4f71 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (544.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (544.0872754503931, 411.0)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="544.0872754503931" height="411.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 0a604f3da..df75f692e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 58.335757089194004 L0.0 411.664242910806 L705.0 411.664242910806 L705.0 58.335757089194004 Z">
     </path>
     <g transform="translate(29.5 84.835757089194 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="597.0678809058613" height="274.328485821612">
             </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 58.335757089194004 L0.0 411.664242910806 L705.0 411.664242910806 L705.0 58.335757089194004 Z" pointer-events="none">
     </path>
   </g>
-  <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 e670b9723..b0e1709ea 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 58.335757089194004 L0.0 411.664242910806 L705.0 411.664242910806 L705.0 58.335757089194004 Z">
     </path>
     <g transform="translate(29.5 84.835757089194 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (597.0678809058613, 274.328485821612)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="597.0678809058613" height="274.328485821612">
             </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 58.335757089194004 L0.0 411.664242910806 L705.0 411.664242910806 L705.0 58.335757089194004 Z" pointer-events="none">
     </path>
   </g>
-  <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 994cd5e4a..e9ae9e0e8 100644
--- a/docs/images/guides/stat/guideHeatmapTileVsHeatMap.svg
+++ b/docs/images/guides/stat/guideHeatmapTileVsHeatMap.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="235.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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="M24.73985506828936 0.0 L24.73985506828936 235.0 L325.76014493171067 235.0 L325.76014493171067 0.0 Z">
       </path>
       <g transform="translate(54.23985506828936 26.5 ) ">
@@ -168,7 +168,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (193.08817076928256, 88.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (193.08817076928256, 88.71618656967037)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -192,7 +192,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="193.08817076928256" height="88.71618656967037">
               </rect>
             </clipPath>
@@ -409,7 +409,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="M24.73985506828936 0.0 L24.73985506828936 235.0 L325.76014493171067 235.0 L325.76014493171067 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="350.5" height="235.0" x="354.5" y="0.0">
@@ -424,117 +424,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -543,7 +543,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="M24.73985506828936 0.0 L24.73985506828936 235.0 L325.76014493171067 235.0 L325.76014493171067 0.0 Z">
       </path>
       <g transform="translate(54.23985506828936 26.5 ) ">
@@ -577,7 +577,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (193.08817076928256, 88.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (193.08817076928256, 88.71618656967037)]">
           <g transform="translate(13.980605455468202 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="13.980605455468202" y="0.0" width="193.08817076928256" height="88.71618656967037">
               </rect>
             </clipPath>
@@ -818,7 +818,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="M24.73985506828936 0.0 L24.73985506828936 235.0 L325.76014493171067 235.0 L325.76014493171067 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 b113676d7..92bd8309f 100644
--- a/docs/images/guides/stat/guideHeatmapTileVsHeatMap_dark.svg
+++ b/docs/images/guides/stat/guideHeatmapTileVsHeatMap_dark.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="235.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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="M24.73985506828936 0.0 L24.73985506828936 235.0 L325.76014493171067 235.0 L325.76014493171067 0.0 Z">
       </path>
       <g transform="translate(54.23985506828936 26.5 ) ">
@@ -258,7 +258,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (193.08817076928256, 88.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (193.08817076928256, 88.71618656967037)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -282,7 +282,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="193.08817076928256" height="88.71618656967037">
               </rect>
             </clipPath>
@@ -409,7 +409,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="M24.73985506828936 0.0 L24.73985506828936 235.0 L325.76014493171067 235.0 L325.76014493171067 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="350.5" height="235.0" x="354.5" y="0.0">
@@ -424,117 +424,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -543,7 +543,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="M24.73985506828936 0.0 L24.73985506828936 235.0 L325.76014493171067 235.0 L325.76014493171067 0.0 Z">
       </path>
       <g transform="translate(54.23985506828936 26.5 ) ">
@@ -667,7 +667,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (193.08817076928256, 88.71618656967037)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (193.08817076928256, 88.71618656967037)]">
           <g transform="translate(13.980605455468202 0.0 ) ">
             <g>
               <g>
@@ -691,7 +691,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="193.08817076928256" height="88.71618656967037">
               </rect>
             </clipPath>
@@ -818,7 +818,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="M24.73985506828936 0.0 L24.73985506828936 235.0 L325.76014493171067 235.0 L325.76014493171067 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 b0d27fea4..e7259aa35 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M163.9731148188469 0.0 L163.9731148188469 470.0 L541.0268851811531 470.0 L541.0268851811531 0.0 Z">
     </path>
     <g transform="translate(193.4731148188469 6.5 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (86.28381343032963, 0.0), (188.83783783783784, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (86.28381343032963, 0.0), (188.83783783783784, 411.0)]">
         <g transform="translate(86.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="86.28381343032963" y="0.0" width="188.83783783783784" height="411.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="M163.9731148188469 0.0 L163.9731148188469 470.0 L541.0268851811531 470.0 L541.0268851811531 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 45e091843..2f26ce80f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M163.9731148188469 0.0 L163.9731148188469 470.0 L541.0268851811531 470.0 L541.0268851811531 0.0 Z">
     </path>
     <g transform="translate(193.4731148188469 6.5 ) ">
@@ -245,7 +245,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (86.28381343032963, 0.0), (188.83783783783784, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (86.28381343032963, 0.0), (188.83783783783784, 411.0)]">
         <g transform="translate(86.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="86.28381343032963" y="0.0" width="188.83783783783784" height="411.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="M163.9731148188469 0.0 L163.9731148188469 470.0 L541.0268851811531 470.0 L541.0268851811531 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 8dd10a1a0..7b8f3584c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 18.19578696621369 L0.0 451.8042130337863 L705.0 451.8042130337863 L705.0 18.19578696621369 Z">
     </path>
     <g transform="translate(29.5 24.69578696621369 ) ">
@@ -159,7 +159,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (578.9402948317031, 374.6084260675726)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (578.9402948317031, 374.6084260675726)]">
         <g transform="translate(27.034701220281416 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="27.034701220281416" y="0.0" width="578.9402948317031" height="374.6084260675726">
             </rect>
           </clipPath>
@@ -365,6 +365,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 18.19578696621369 L0.0 451.8042130337863 L705.0 451.8042130337863 L705.0 18.19578696621369 Z" pointer-events="none">
     </path>
   </g>
-  <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 e9d83241a..91c40c766 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 18.19578696621369 L0.0 451.8042130337863 L705.0 451.8042130337863 L705.0 18.19578696621369 Z">
     </path>
     <g transform="translate(29.5 24.69578696621369 ) ">
@@ -227,7 +227,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (578.9402948317031, 374.6084260675726)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (578.9402948317031, 374.6084260675726)]">
         <g transform="translate(27.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -243,7 +243,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="27.034701220281416" y="0.0" width="578.9402948317031" height="374.6084260675726">
             </rect>
           </clipPath>
@@ -365,6 +365,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 18.19578696621369 L0.0 451.8042130337863 L705.0 451.8042130337863 L705.0 18.19578696621369 Z" pointer-events="none">
     </path>
   </g>
-  <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 ba3dd9385..6a9cb8a50 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 77.40929414956858 L0.0 392.5907058504314 L705.0 392.5907058504314 L705.0 77.40929414956858 Z">
     </path>
     <g transform="translate(29.5 83.90929414956858 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (523.6183666430544, 240.58141170086284)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (523.6183666430544, 240.58141170086284)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="523.6183666430544" height="240.58141170086284">
             </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 77.40929414956858 L0.0 392.5907058504314 L705.0 392.5907058504314 L705.0 77.40929414956858 Z" pointer-events="none">
     </path>
   </g>
-  <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 82e6fe8ec..98799e578 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 77.40929414956858 L0.0 392.5907058504314 L705.0 392.5907058504314 L705.0 77.40929414956858 Z">
     </path>
     <g transform="translate(29.5 83.90929414956858 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (523.6183666430544, 240.58141170086284)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (523.6183666430544, 240.58141170086284)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="523.6183666430544" height="240.58141170086284">
             </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 77.40929414956858 L0.0 392.5907058504314 L705.0 392.5907058504314 L705.0 77.40929414956858 Z" pointer-events="none">
     </path>
   </g>
-  <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 9515eb3fe..3a8714d90 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (564.5291288269711, 344.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (564.5291288269711, 344.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="564.5291288269711" height="344.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="564.5291288269711" height="344.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 1867c943a..54d03589c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -313,7 +313,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (564.5291288269711, 344.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (564.5291288269711, 344.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="564.5291288269711" height="344.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="564.5291288269711" height="344.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 7bea7c73f..9626df56e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 313.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 313.73695078369224)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="655.0193945445318" height="313.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="13.980605455468202" y="0.0" width="655.0193945445318" height="313.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 14ee6ddef..f6d3b27bf 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 313.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 313.73695078369224)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="655.0193945445318" height="313.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="13.980605455468202" y="0.0" width="655.0193945445318" height="313.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 55a4133dd..ca7d31df0 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="391.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 f5f5f1ac9..5e878a50b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -336,7 +336,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="391.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 57c37f25a..d3ac5a196 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (551.6136044435276, 199.7369507836922)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (551.6136044435276, 199.7369507836922)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="551.6136044435276" height="199.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="551.6136044435276" height="199.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="551.6136044435276" height="199.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 089bc128b..86f237892 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (551.6136044435276, 199.7369507836922)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (551.6136044435276, 199.7369507836922)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="551.6136044435276" height="199.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="551.6136044435276" height="199.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="551.6136044435276" height="199.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 70630560e..66bb02205 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 372.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 372.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="372.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/samples/area/area_with_reversed_axis_dark.svg b/docs/images/samples/area/area_with_reversed_axis_dark.svg
index a5a2af786..6a318faca 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 372.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 372.0)]">
         <g transform="translate(27.034701220281416 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="27.034701220281416" y="0.0" width="641.9652987797186" height="372.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/samples/area/density_plot.svg b/docs/images/samples/area/density_plot.svg
index ac2772931..6f792e161 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 d0b215121..05ee7996d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 aa5461b5d..a389e8df4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -185,7 +185,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 b4cf5d304..cb32b3f36 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -356,7 +356,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 09068d5c7..6ca911944 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (446.61360444352766, 282.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (446.61360444352766, 282.73695078369224)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="446.61360444352766" height="282.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="446.61360444352766" height="282.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="446.61360444352766" height="282.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 40e0d3ec8..bde2338d2 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (446.61360444352766, 282.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (446.61360444352766, 282.73695078369224)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="446.61360444352766" height="282.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="446.61360444352766" height="282.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="446.61360444352766" height="282.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 e1ccb98eb..d548e624c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (512.451317149088, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (512.451317149088, 391.0)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="512.451317149088" height="391.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 1b45ef4c6..ddb2734f4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -287,7 +287,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (512.451317149088, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (512.451317149088, 391.0)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="512.451317149088" height="391.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 2b985ccc7..d3f364158 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 8d0a32f5d..2d1730f1a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 d1243c08b..90593a6c4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="655.0193945445318" height="411.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 db1945bbf..cb03f8669 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="655.0193945445318" height="411.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 ec5f4d357..2bb00a485 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="655.0193945445318" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="13.980605455468202" y="0.0" width="655.0193945445318" height="411.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 7c3a7b3f4..73919c858 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="655.0193945445318" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="13.980605455468202" y="0.0" width="655.0193945445318" height="411.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 014c52bef..d51ed0668 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (510.46719055336285, 375.4)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (510.46719055336285, 375.4)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="510.46719055336285" height="375.4">
             </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 3fcd8e72e..2ac47716f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (510.46719055336285, 375.4)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (510.46719055336285, 375.4)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="510.46719055336285" height="375.4">
             </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 c86626b0e..103b2575b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 375.4)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 375.4)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="375.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 d95b60063..8c1927409 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 375.4)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 375.4)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="375.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 b2c3c2445..57f4db34b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
@@ -307,6 +307,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 d5e612379..44e2b7af4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
@@ -307,6 +307,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 8b122094a..be6bf5b59 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 379c36bee..3674913b3 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 40034fdd2..e3754dbd2 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 e2c9bd78c..10c8b0189 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 49ff321cf..304d50eae 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (549.9249881559535, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (549.9249881559535, 391.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="549.9249881559535" height="391.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 50b3420dc..9253dcebf 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (549.9249881559535, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (549.9249881559535, 391.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="549.9249881559535" height="391.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 37f7ba086..3762d692b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 f9a0d1a87..e105d7c09 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 af75fa9d8..4bc88eb5b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (132.38654742168382, 0.0), (360.25599697343006, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (132.38654742168382, 0.0), (360.25599697343006, 391.0)]">
         <g transform="translate(132.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="132.38654742168382" y="0.0" width="360.25599697343006" height="391.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 cbac1f0b7..4299988b9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (132.38654742168382, 0.0), (360.25599697343006, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (132.38654742168382, 0.0), (360.25599697343006, 391.0)]">
         <g transform="translate(132.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="132.38654742168382" y="0.0" width="360.25599697343006" height="391.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 adefc4aac..26816200d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 e3c8d254f..27d7f4d27 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 1349684e1..40f2e5136 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (549.9249881559535, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (549.9249881559535, 391.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="549.9249881559535" height="391.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 f3751e491..6c80b5d3a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (549.9249881559535, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (549.9249881559535, 391.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="549.9249881559535" height="391.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 0953a2412..a68847fb4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -185,7 +185,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (523.0760566434257, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (523.0760566434257, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="523.0760566434257" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="0.0" width="523.0760566434257" height="411.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 550548276..a835d3ccd 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -358,7 +358,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (523.0760566434257, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (523.0760566434257, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="523.0760566434257" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="0.0" width="523.0760566434257" height="411.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 e31b3774f..f8561aa1a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="626.0040878687822" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="42.99591213121782" y="0.0" width="626.0040878687822" height="411.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 28c09da80..fc1ab1531 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -294,7 +294,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 411.0)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="626.0040878687822" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="42.99591213121782" y="0.0" width="626.0040878687822" height="411.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 c7c4abda7..bf580ce18 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (117.21880258897198, 0.0), (551.781197411028, 415.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (117.21880258897198, 0.0), (551.781197411028, 415.0)]">
         <g transform="translate(117.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="117.21880258897198" y="0.0" width="551.781197411028" height="415.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="117.21880258897198" y="0.0" width="551.781197411028" height="415.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 76662963c..c59ca2792 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </line>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (117.21880258897198, 0.0), (551.781197411028, 415.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (117.21880258897198, 0.0), (551.781197411028, 415.0)]">
         <g transform="translate(117.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="117.21880258897198" y="0.0" width="551.781197411028" height="415.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="117.21880258897198" y="0.0" width="551.781197411028" height="415.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 ca6e1d575..2569dd81a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -185,7 +185,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 0b87b81a8..960a2e6bf 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -358,7 +358,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 60cb828a3..328a6d60e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (536.1301524082389, 317.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (536.1301524082389, 317.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="536.1301524082389" height="317.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 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 53d7a94a5..32e5d317c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -287,7 +287,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (536.1301524082389, 317.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (536.1301524082389, 317.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="536.1301524082389" height="317.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 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 2d4391f89..a1c952e15 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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/samples/candlestick/candlestick_simple_dark.svg b/docs/images/samples/candlestick/candlestick_simple_dark.svg
index 2415efe3c..cb7df1a80 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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/samples/candlestick/preview_candlestick_settings_stat_api.svg b/docs/images/samples/candlestick/preview_candlestick_settings_stat_api.svg
index ce71499ec..20cb53eca 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (431.13015240823887, 341.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (431.13015240823887, 341.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="431.13015240823887" height="341.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 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 ea985a9ba..3d576c53a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -287,7 +287,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (431.13015240823887, 341.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (431.13015240823887, 341.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="431.13015240823887" height="341.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 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 75d39a4ab..3e0613b91 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (545.3216152756337, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (545.3216152756337, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="545.3216152756337" height="411.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 6deb8917c..deda00150 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -234,7 +234,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (545.3216152756337, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (545.3216152756337, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="545.3216152756337" height="411.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 e1eccdf7f..01cd078fc 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (56.050007896031026, 0.0), (612.949992103969, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (56.050007896031026, 0.0), (612.949992103969, 391.0)]">
         <g transform="translate(56.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="56.050007896031026" y="0.0" width="612.949992103969" height="391.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 0c740e3a3..b47bc78b9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -273,7 +273,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (56.050007896031026, 0.0), (612.949992103969, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (56.050007896031026, 0.0), (612.949992103969, 391.0)]">
         <g transform="translate(56.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="56.050007896031026" y="0.0" width="612.949992103969" height="391.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 a8e7e7e48..571fcf128 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 c13d4b6cf..87fb7b2c9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -263,7 +263,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 19d6bd8a7..cc9bf7987 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 4a7759fad..cdf8b3932 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -272,7 +272,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 040e6f73b..4a545d31b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (511.7105771661866, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (511.7105771661866, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="511.7105771661866" height="411.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 8352520a1..df498c571 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -338,7 +338,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (511.7105771661866, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (511.7105771661866, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="511.7105771661866" height="411.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 eee1993af..ce4b4c1e3 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 391.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="391.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 9dad78c3c..9f65e32ed 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 391.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="641.9652987797186" height="391.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 78afa1a67..eb7bbf0ee 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 e806e75e6..83b3852ed 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 6a949818b..6fbd0f342 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 391.0)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="626.0040878687822" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="42.99591213121782" y="0.0" width="626.0040878687822" height="391.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 bcfd82c0a..5df244ab8 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -320,7 +320,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (42.99591213121782, 0.0), (626.0040878687822, 391.0)]">
         <g transform="translate(42.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="42.99591213121782" y="0.0" width="626.0040878687822" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="42.99591213121782" y="0.0" width="626.0040878687822" height="391.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 bc18e026e..f45e183df 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 e2b131b00..f88bc30d8 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (589.0872754503931, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="589.0872754503931" height="411.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 baea79615..51ab69344 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 be4bc73ec..f1dc9e123 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 1eab00d46..d3fbbafff 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (584.0137851410482, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (584.0137851410482, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="584.0137851410482" height="411.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 d72ea0395..6041d267c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -272,7 +272,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (584.0137851410482, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (584.0137851410482, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="584.0137851410482" height="411.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 e801812af..bca08bd83 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 b49b25124..c0cb931fb 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 3395d5a7c..dad2742ff 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 87095aa02..6ad23343e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 c083373c6..9ae7ceb08 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (560.006898758758, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (560.006898758758, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="560.006898758758" height="411.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 16cc62d14..5fd610cf1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -303,7 +303,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (560.006898758758, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (560.006898758758, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="560.006898758758" height="411.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 6868e74c7..bd25bbb2e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 20f0b6c58..fa6562cb3 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -285,7 +285,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 232ab4e14..607e7aedd 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 44.91216279735721 L0.0 425.0878372026428 L705.0 425.0878372026428 L705.0 44.91216279735721 Z">
     </path>
     <g transform="translate(6.5 71.41216279735721 ) ">
@@ -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), (255.12530785621607, 347.1756744052856)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (255.12530785621607, 347.1756744052856)]">
         <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="255.12530785621607" height="347.1756744052856">
             </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 44.91216279735721 L0.0 425.0878372026428 L705.0 425.0878372026428 L705.0 44.91216279735721 Z" pointer-events="none">
     </path>
   </g>
-  <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 939d5bcc8..a225b8c1e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 44.91216279735721 L0.0 425.0878372026428 L705.0 425.0878372026428 L705.0 44.91216279735721 Z">
     </path>
     <g transform="translate(6.5 71.41216279735721 ) ">
@@ -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), (255.12530785621607, 347.1756744052856)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (255.12530785621607, 347.1756744052856)]">
         <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="255.12530785621607" height="347.1756744052856">
             </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 44.91216279735721 L0.0 425.0878372026428 L705.0 425.0878372026428 L705.0 44.91216279735721 Z" pointer-events="none">
     </path>
   </g>
-  <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 f1aa21ac0..8876993e6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M185.4332210571072 0.0 L185.4332210571072 470.0 L519.5667789428928 470.0 L519.5667789428928 0.0 Z">
     </path>
     <g transform="translate(191.9332210571072 26.5 ) ">
@@ -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), (321.1335578857856, 437.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (321.1335578857856, 437.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="321.1335578857856" height="437.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="M185.4332210571072 0.0 L185.4332210571072 470.0 L519.5667789428928 470.0 L519.5667789428928 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 2d866a25a..7bea9799c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M185.4332210571072 0.0 L185.4332210571072 470.0 L519.5667789428928 470.0 L519.5667789428928 0.0 Z">
     </path>
     <g transform="translate(191.9332210571072 26.5 ) ">
@@ -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), (321.1335578857856, 437.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (321.1335578857856, 437.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="321.1335578857856" height="437.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="M185.4332210571072 0.0 L185.4332210571072 470.0 L519.5667789428928 470.0 L519.5667789428928 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 8b212837b..613a31ee7 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 81.35440057233224 L0.0 318.6455994276678 L600.0 318.6455994276678 L600.0 81.35440057233224 Z">
     </path>
     <g transform="translate(6.5 107.85440057233224 ) ">
@@ -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), (150.12530785621607, 204.29119885533552)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (150.12530785621607, 204.29119885533552)]">
         <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="150.12530785621607" height="204.29119885533552">
             </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 81.35440057233224 L0.0 318.6455994276678 L600.0 318.6455994276678 L600.0 81.35440057233224 Z" pointer-events="none">
     </path>
   </g>
-  <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 05847bccc..f145a3748 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 81.35440057233224 L0.0 318.6455994276678 L600.0 318.6455994276678 L600.0 81.35440057233224 Z">
     </path>
     <g transform="translate(6.5 107.85440057233224 ) ">
@@ -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), (150.12530785621607, 204.29119885533552)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (150.12530785621607, 204.29119885533552)]">
         <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="150.12530785621607" height="204.29119885533552">
             </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 81.35440057233224 L0.0 318.6455994276678 L600.0 318.6455994276678 L600.0 81.35440057233224 Z" pointer-events="none">
     </path>
   </g>
-  <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 3b7c6efbf..142d60a97 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M27.55762959670176 0.0 L27.55762959670176 400.0 L572.4423704032982 400.0 L572.4423704032982 0.0 Z">
     </path>
     <g transform="translate(34.05762959670176 64.5 ) ">
@@ -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), (531.8847408065965, 329.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (531.8847408065965, 329.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="531.8847408065965" height="329.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="M27.55762959670176 0.0 L27.55762959670176 400.0 L572.4423704032982 400.0 L572.4423704032982 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 11dadbfee..e9050cc85 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M27.55762959670176 0.0 L27.55762959670176 400.0 L572.4423704032982 400.0 L572.4423704032982 0.0 Z">
     </path>
     <g transform="translate(34.05762959670176 64.5 ) ">
@@ -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), (531.8847408065965, 329.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (531.8847408065965, 329.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="531.8847408065965" height="329.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="M27.55762959670176 0.0 L27.55762959670176 400.0 L572.4423704032982 400.0 L572.4423704032982 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 e5aa13666..34c767471 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 5.385440135508929 L0.0 464.61455986449107 L705.0 464.61455986449107 L705.0 5.385440135508929 Z">
     </path>
     <g transform="translate(29.5 11.88544013550893 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.22911972898214)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.22911972898214)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="400.22911972898214">
             </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 5.385440135508929 L0.0 464.61455986449107 L705.0 464.61455986449107 L705.0 5.385440135508929 Z" pointer-events="none">
     </path>
   </g>
-  <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 92fae2132..cd7f047ee 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 5.385440135508929 L0.0 464.61455986449107 L705.0 464.61455986449107 L705.0 5.385440135508929 Z">
     </path>
     <g transform="translate(29.5 11.88544013550893 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.22911972898214)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 400.22911972898214)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="400.22911972898214">
             </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 5.385440135508929 L0.0 464.61455986449107 L705.0 464.61455986449107 L705.0 5.385440135508929 Z" pointer-events="none">
     </path>
   </g>
-  <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 25ddc3598..34f3bf6f1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -165,7 +165,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (72.01121880696743, 0.0), (596.9887811930325, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (72.01121880696743, 0.0), (596.9887811930325, 391.0)]">
         <g transform="translate(72.01121880696743 0.0 ) ">
           <g>
             <g>
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="72.01121880696743" y="0.0" width="596.9887811930325" height="391.0">
             </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 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 588c70e21..3ce1c574b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -258,7 +258,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (72.01121880696743, 0.0), (596.9887811930325, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (72.01121880696743, 0.0), (596.9887811930325, 391.0)]">
         <g transform="translate(72.01121880696743 0.0 ) ">
           <g>
             <g>
@@ -462,7 +462,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="72.01121880696743" y="0.0" width="596.9887811930325" height="391.0">
             </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 0.0 L0.0 470.0 L705.0 470.0 L705.0 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 0377ac94a..7ff23bf98 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 1.9799477846042635 L0.0 501.0200522153957 L705.0 501.0200522153957 L705.0 1.9799477846042635 Z">
     </path>
     <g transform="translate(6.5 66.47994778460426 ) ">
@@ -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), (692.0, 428.0401044307915)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (692.0, 428.0401044307915)]">
         <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="692.0" height="428.0401044307915">
             </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 1.9799477846042635 L0.0 501.0200522153957 L705.0 501.0200522153957 L705.0 1.9799477846042635 Z" pointer-events="none">
     </path>
   </g>
-  <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 009cb501f..fbbe3d562 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 1.9799477846042635 L0.0 501.0200522153957 L705.0 501.0200522153957 L705.0 1.9799477846042635 Z">
     </path>
     <g transform="translate(6.5 66.47994778460426 ) ">
@@ -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), (692.0, 428.0401044307915)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (692.0, 428.0401044307915)]">
         <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="692.0" height="428.0401044307915">
             </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 1.9799477846042635 L0.0 501.0200522153957 L705.0 501.0200522153957 L705.0 1.9799477846042635 Z" pointer-events="none">
     </path>
   </g>
-  <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 00d877ded..809017f3b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 4985ce476..aca75ed83 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 ae81c0283..3dbf41f08 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.10088766206587 L0.0 427.8991123379341 L705.0 427.8991123379341 L705.0 42.10088766206587 Z">
     </path>
     <g transform="translate(6.5 48.60088766206587 ) ">
@@ -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), (692.0, 372.79822467586825)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (0.0, 0.0), (692.0, 372.79822467586825)]">
         <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="692.0" height="372.79822467586825">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="0.0" y="0.0" width="692.0" height="372.79822467586825">
             </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.10088766206587 L0.0 427.8991123379341 L705.0 427.8991123379341 L705.0 42.10088766206587 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 0bd74b301..c8b07cf89 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.10088766206587 L0.0 427.8991123379341 L705.0 427.8991123379341 L705.0 42.10088766206587 Z">
     </path>
     <g transform="translate(6.5 48.60088766206587 ) ">
@@ -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), (692.0, 372.79822467586825)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (0.0, 0.0), (692.0, 372.79822467586825)]">
         <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="692.0" height="372.79822467586825">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="0.0" y="0.0" width="692.0" height="372.79822467586825">
             </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.10088766206587 L0.0 427.8991123379341 L705.0 427.8991123379341 L705.0 42.10088766206587 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 4efdad396..8df1d2c36 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M1.6449245365588467 0.0 L1.6449245365588467 470.0 L703.3550754634412 470.0 L703.3550754634412 0.0 Z">
     </path>
     <g transform="translate(31.144924536558847 6.5 ) ">
@@ -157,7 +157,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (548.0000000000001, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (548.0000000000001, 411.0)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="548.0000000000001" height="411.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="M1.6449245365588467 0.0 L1.6449245365588467 470.0 L703.3550754634412 470.0 L703.3550754634412 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 99dc5b042..a30068934 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M1.6449245365588467 0.0 L1.6449245365588467 470.0 L703.3550754634412 470.0 L703.3550754634412 0.0 Z">
     </path>
     <g transform="translate(31.144924536558847 6.5 ) ">
@@ -220,7 +220,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (548.0000000000001, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (548.0000000000001, 411.0)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="548.0000000000001" height="411.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="M1.6449245365588467 0.0 L1.6449245365588467 470.0 L703.3550754634412 470.0 L703.3550754634412 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 1a0ccc26b..d00490915 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 76.10633631270781 L0.0 393.8936636872922 L705.0 393.8936636872922 L705.0 76.10633631270781 Z">
     </path>
     <g transform="translate(29.5 82.60633631270781 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (48.06940244056283, 0.0), (563.2430066388013, 258.7873273745844)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (48.06940244056283, 0.0), (563.2430066388013, 258.7873273745844)]">
         <g transform="translate(48.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="48.06940244056283" y="0.0" width="563.2430066388013" height="258.7873273745844">
             </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 76.10633631270781 L0.0 393.8936636872922 L705.0 393.8936636872922 L705.0 76.10633631270781 Z" pointer-events="none">
     </path>
   </g>
-  <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 587e74ac1..07e3db5c6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M0.0 76.10633631270781 L0.0 393.8936636872922 L705.0 393.8936636872922 L705.0 76.10633631270781 Z">
     </path>
     <g transform="translate(29.5 82.60633631270781 ) ">
@@ -253,7 +253,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (48.06940244056283, 0.0), (563.2430066388013, 258.7873273745844)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (48.06940244056283, 0.0), (563.2430066388013, 258.7873273745844)]">
         <g transform="translate(48.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="48.06940244056283" y="0.0" width="563.2430066388013" height="258.7873273745844">
             </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 76.10633631270781 L0.0 393.8936636872922 L705.0 393.8936636872922 L705.0 76.10633631270781 Z" pointer-events="none">
     </path>
   </g>
-  <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 2f26faa2b..b477f2964 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (579.2397136073553, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (579.2397136073553, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="579.2397136073553" height="411.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 edfe639df..36e2b48e6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -313,7 +313,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (579.2397136073553, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (579.2397136073553, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="579.2397136073553" height="411.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 b764b283e..f77442963 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 38a57b69d..73a70ce45 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="391.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 715557813..1ed922939 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 79ead93b6..4b8442cd3 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 15369799a..f9372cefd 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 521a13365..f62895c7a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -307,7 +307,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 1a2796187..21865f047 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -163,7 +163,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (492.0009484407087, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (492.0009484407087, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="492.0009484407087" height="411.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 951258a16..53f15a3b8 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -251,7 +251,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (492.0009484407087, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (492.0009484407087, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="492.0009484407087" height="411.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 35c1bbe8e..2c643c212 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 185.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 185.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="185.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 7f708af09..5d0f04b7c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -284,7 +284,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 185.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 185.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="185.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 13dfcb90e..f44296765 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 321.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 321.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="542.0387890890636" height="321.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 a20938474..61b5c30f9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -311,7 +311,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 321.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 321.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="542.0387890890636" height="321.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 621e4611a..2bfd7fb6d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 61.5 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 269.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 269.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="542.0387890890636" height="269.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 aeeede12b..ff46cff44 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 61.5 ) ">
@@ -240,7 +240,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 269.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (542.0387890890636, 269.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="542.0387890890636" height="269.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 b83b1cc91..23af55e60 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 61.5 ) ">
@@ -161,7 +161,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 221.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 221.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="221.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 ce84636ed..283decae4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 61.5 ) ">
@@ -240,7 +240,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 221.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 221.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="221.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 66df67a16..f86ea60da 100644
--- a/docs/images/samples/line/line_and_path_comp_2.svg
+++ b/docs/images/samples/line/line_and_path_comp_2.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="235.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -162,7 +162,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -174,7 +174,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="292.5387890890636" height="156.0">
               </rect>
             </clipPath>
@@ -264,7 +264,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 235.0 L350.5 235.0 L350.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="350.5" height="235.0" x="354.5" y="0.0">
@@ -279,117 +279,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -398,7 +398,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -426,7 +426,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -438,7 +438,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="292.5387890890636" height="156.0">
               </rect>
             </clipPath>
@@ -528,7 +528,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 235.0 L350.5 235.0 L350.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 ec9f1c696..e26e2248f 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
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="705.0" height="235.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -225,7 +225,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -237,7 +237,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="292.5387890890636" height="156.0">
               </rect>
             </clipPath>
@@ -264,7 +264,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 235.0 L350.5 235.0 L350.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="350.5" height="235.0" x="354.5" y="0.0">
@@ -279,117 +279,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -398,7 +398,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 235.0 L350.5 235.0 L350.5 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -489,7 +489,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (292.5387890890636, 156.0)]">
           <g transform="translate(21.961210910936405 0.0 ) ">
             <g>
               <g>
@@ -501,7 +501,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="292.5387890890636" height="156.0">
               </rect>
             </clipPath>
@@ -528,7 +528,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 235.0 L350.5 235.0 L350.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 203adfcd4..ebf92e120 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 e391215a5..a539d2352 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -347,7 +347,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 5b3b3fde1..a0431eb7f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -183,7 +183,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (581.1066699949249, 352.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (581.1066699949249, 352.73695078369224)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="581.1066699949249" height="352.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 6a50d48d1..e872bfb07 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -353,7 +353,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (581.1066699949249, 352.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (581.1066699949249, 352.73695078369224)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="581.1066699949249" height="352.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 fc8c4b356..7060ceab2 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 3c2e570f0..d3423b101 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 0dd5498d4..33c9a5b54 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (551.6136044435276, 199.7369507836922)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (551.6136044435276, 199.7369507836922)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="551.6136044435276" height="199.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="551.6136044435276" height="199.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="551.6136044435276" height="199.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 686e81f47..2ba90992f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (551.6136044435276, 199.7369507836922)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (551.6136044435276, 199.7369507836922)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="551.6136044435276" height="199.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="551.6136044435276" height="199.7369507836922">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="551.6136044435276" height="199.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 4ae5cdd42..45f081696 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.365479477239006, 0.0), (651.634520522761, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.365479477239006, 0.0), (651.634520522761, 411.0)]">
         <g transform="translate(17.365479477239006 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.365479477239006" y="0.0" width="651.634520522761" height="411.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 03075d0db..f8b76877b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (17.365479477239006, 0.0), (651.634520522761, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (17.365479477239006, 0.0), (651.634520522761, 411.0)]">
         <g transform="translate(17.365479477239006 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.365479477239006" y="0.0" width="651.634520522761" height="411.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 6f0f4f9aa..4b48d8f44 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 d66cae3f1..525514a25 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -300,7 +300,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 def56eeb0..4b8e91f52 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 372.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 372.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="372.0">
             </rect>
           </clipPath>
@@ -388,6 +388,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 8ba239ff5..341723c73 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 45.5 ) ">
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 372.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 372.0)]">
         <g transform="translate(29.941816366404606 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="29.941816366404606" y="0.0" width="639.0581836335954" height="372.0">
             </rect>
           </clipPath>
@@ -388,6 +388,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 a47d8d9ba..f4d5d6de6 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
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="600.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L298.0 400.0 L298.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -168,7 +168,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (226.98469332425037, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (226.98469332425037, 321.0)]">
           <g transform="translate(35.01530667574961 0.0 ) ">
             <g>
               <g>
@@ -180,7 +180,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="35.01530667574961" y="0.0" width="226.98469332425037" height="321.0">
               </rect>
             </clipPath>
@@ -291,7 +291,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 400.0 L298.0 400.0 L298.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="298.0" height="400.0" x="302.0" y="0.0">
@@ -306,117 +306,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -425,7 +425,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 400.0 L298.0 400.0 L298.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -459,7 +459,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (226.98469332425037, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (226.98469332425037, 321.0)]">
           <g transform="translate(35.01530667574961 0.0 ) ">
             <g>
               <g>
@@ -471,7 +471,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="35.01530667574961" y="0.0" width="226.98469332425037" height="321.0">
               </rect>
             </clipPath>
@@ -582,7 +582,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 400.0 L298.0 400.0 L298.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 513a9623c..520389955 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
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="block" class="plt-container" width="600.0" height="400.0">
-  <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>
@@ -15,117 +15,117 @@
 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -134,7 +134,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 400.0 L298.0 400.0 L298.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -252,7 +252,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (226.98469332425037, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (226.98469332425037, 321.0)]">
           <g transform="translate(35.01530667574961 0.0 ) ">
             <g>
               <g>
@@ -264,7 +264,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx2">
+            <clipPath id="_sample_helper_static_id_prefix_2">
               <rect x="35.01530667574961" y="0.0" width="226.98469332425037" height="321.0">
               </rect>
             </clipPath>
@@ -291,7 +291,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 400.0 L298.0 400.0 L298.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="298.0" height="400.0" x="302.0" y="0.0">
@@ -306,117 +306,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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -425,7 +425,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 400.0 L298.0 400.0 L298.0 0.0 Z">
       </path>
       <g transform="translate(29.5 26.5 ) ">
@@ -543,7 +543,7 @@ font-size: 13.0px;
             </g>
           </g>
         </g>
-        <g clip-path="url(#xXxprefixXx5)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (226.98469332425037, 321.0)]">
+        <g clip-path="url(#_sample_helper_static_id_prefix_5)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (226.98469332425037, 321.0)]">
           <g transform="translate(35.01530667574961 0.0 ) ">
             <g>
               <g>
@@ -555,7 +555,7 @@ font-size: 13.0px;
             </g>
           </g>
           <defs>
-            <clipPath id="xXxprefixXx5">
+            <clipPath id="_sample_helper_static_id_prefix_5">
               <rect x="35.01530667574961" y="0.0" width="226.98469332425037" height="321.0">
               </rect>
             </clipPath>
@@ -582,7 +582,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 400.0 L298.0 400.0 L298.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 8f30a8fd0..47844620a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (446.61360444352766, 282.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (446.61360444352766, 282.73695078369224)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="446.61360444352766" height="282.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="446.61360444352766" height="282.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="446.61360444352766" height="282.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 831fe89f1..92d267a2b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -335,7 +335,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (446.61360444352766, 282.73695078369224)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_3)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (446.61360444352766, 282.73695078369224)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="446.61360444352766" height="282.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="446.61360444352766" height="282.73695078369224">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="21.961210910936405" y="0.0" width="446.61360444352766" height="282.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 ecd7d70db..951b237c2 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -185,7 +185,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (511.0621196371661, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (511.0621196371661, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="511.0621196371661" height="411.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 4f9853150..5f04014c6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -356,7 +356,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (511.0621196371661, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (511.0621196371661, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="511.0621196371661" height="411.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 267832fb3..057f02643 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 d4970923a..d486238ee 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -312,7 +312,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 1f1c9a42a..806236cc0 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -181,7 +181,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 344.193945445318)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 344.193945445318)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="344.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 835a65221..85824441d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -340,7 +340,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 344.193945445318)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 344.193945445318)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="344.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 17b51396d..46dcfa29c 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 5a2e32432..1f0902423 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -289,7 +289,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 0cf0f028a..2124c4706 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 eba7ce542..aeb523e84 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -280,7 +280,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 7cc418368..a148ab042 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="391.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 810137b25..e56e61cd9 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx6)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_6)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 391.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx3">
+          <clipPath id="_sample_helper_static_id_prefix_3">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx4">
+          <clipPath id="_sample_helper_static_id_prefix_4">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx5">
+          <clipPath id="_sample_helper_static_id_prefix_5">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="391.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx6">
+          <clipPath id="_sample_helper_static_id_prefix_6">
             <rect x="29.941816366404606" y="0.0" width="639.0581836335954" height="391.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 f4a5e1c05..1d72890db 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (614.7024014286222, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (614.7024014286222, 457.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="614.7024014286222" height="457.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 63c071b27..4d3df5d9e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (614.7024014286222, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (614.7024014286222, 457.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="614.7024014286222" height="457.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 5ee5765f5..f4908c054 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (572.6483056638091, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (572.6483056638091, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="572.6483056638091" height="411.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 ff0697bdc..b0d5614ab 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (572.6483056638091, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (572.6483056638091, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="572.6483056638091" height="411.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 bc25db1f4..121818770 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (574.7993741512812, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (574.7993741512812, 457.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="574.7993741512812" height="457.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 5f7bb25c8..92c294778 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (574.7993741512812, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (574.7993741512812, 457.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="574.7993741512812" height="457.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 2ea09f2d3..63f7b5d7b 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (571.9845414590388, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (571.9845414590388, 457.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="571.9845414590388" height="457.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 731da99c8..f67f194b7 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (571.9845414590388, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (571.9845414590388, 457.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="571.9845414590388" height="457.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 0283bea00..844e5445f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (604.1875726990258, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (604.1875726990258, 457.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="604.1875726990258" height="457.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 cf5b05db8..4919f5db7 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (604.1875726990258, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (604.1875726990258, 457.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="604.1875726990258" height="457.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 f5bfa3964..25981fdb6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (579.8327293876425, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (579.8327293876425, 457.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="579.8327293876425" height="457.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 60a45080b..84bd34fbd 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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.5 6.5 ) ">
@@ -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), (579.8327293876425, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (579.8327293876425, 457.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="579.8327293876425" height="457.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 3cf3bec2e..600ab0fb8 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 87d73f2d8..4b21cdaa5 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -309,7 +309,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 e764c08c0..81611c004 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -167,7 +167,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.79618173163473, 0.0), (513.1123741398574, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.79618173163473, 0.0), (513.1123741398574, 391.0)]">
         <g transform="translate(35.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="35.79618173163473" y="0.0" width="513.1123741398574" height="391.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 ed899885c..c9f55c19d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -267,7 +267,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.79618173163473, 0.0), (513.1123741398574, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.79618173163473, 0.0), (513.1123741398574, 391.0)]">
         <g transform="translate(35.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="35.79618173163473" y="0.0" width="513.1123741398574" height="391.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 8804ae206..8d1c3fb49 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (565.1454590839885, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (565.1454590839885, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="565.1454590839885" height="391.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 5e870f833..6d222cb72 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (565.1454590839885, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (565.1454590839885, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="565.1454590839885" height="391.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 8c69881dc..e991d9a74 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (489.8490783168893, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (489.8490783168893, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="489.8490783168893" height="391.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 30b016de2..43b2400e6 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -293,7 +293,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (489.8490783168893, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (489.8490783168893, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="489.8490783168893" height="391.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 b42b654a2..c7b06887f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (489.8490783168893, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (489.8490783168893, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="489.8490783168893" height="391.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 3828d753d..b07871398 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (489.8490783168893, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (489.8490783168893, 391.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="489.8490783168893" height="391.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 ccdb2597c..b296d6d99 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="655.0193945445318" height="411.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 519c85506..dc32680e4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -333,7 +333,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (655.0193945445318, 411.0)]">
         <g transform="translate(13.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="13.980605455468202" y="0.0" width="655.0193945445318" height="411.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 b36b643c7..5ff5f1577 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -179,7 +179,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 33ed342b8..1a4d6d771 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -325,7 +325,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 071eda123..5f7090c50 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -187,7 +187,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (581.1066699949249, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (581.1066699949249, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="581.1066699949249" height="411.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 5121f6c9c..69f0b9ef8 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -369,7 +369,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (581.1066699949249, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (581.1066699949249, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="581.1066699949249" height="411.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 c4e0cf8d9..9e6d57867 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -175,7 +175,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 2f47072be..0697c10ae 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -309,7 +309,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 a89f099a2..288a48930 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 bf5395eea..d4cb9b1ee 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -287,7 +287,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 6fb33f096..db06c09e0 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (558.0496782962234, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (558.0496782962234, 391.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="558.0496782962234" height="391.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 4440dff5c..7946c0b48 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 26.5 ) ">
@@ -291,7 +291,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (558.0496782962234, 391.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (558.0496782962234, 391.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="558.0496782962234" height="391.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 656437915..ec67a1b64 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -173,7 +173,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 654b820cd..5df60cf73 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -298,7 +298,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (21.961210910936405, 0.0), (647.0387890890636, 411.0)]">
         <g transform="translate(21.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="21.961210910936405" y="0.0" width="647.0387890890636" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="21.961210910936405" y="0.0" width="647.0387890890636" height="411.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 5d7a3a2b5..b16768651 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 0d2b98011..610a40014 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -293,7 +293,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (35.01530667574961, 0.0), (633.9846933242504, 411.0)]">
         <g transform="translate(35.01530667574961 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="35.01530667574961" y="0.0" width="633.9846933242504" height="411.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 54cd9e7fe..b4d60c4d1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (511.3615384128183, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (511.3615384128183, 411.0)]">
         <g transform="translate(29.941816366404606 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="29.941816366404606" y="0.0" width="511.3615384128183" height="411.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="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 deda68b92..357859fe4 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -312,7 +312,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (511.3615384128183, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (511.3615384128183, 411.0)]">
         <g transform="translate(29.941816366404606 0.0 ) ">
           <g>
             <g>
@@ -344,7 +344,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="511.3615384128183" height="411.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="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 ddc9a2a64..df201fb17 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 0102d8fec..ee38b395e 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -312,7 +312,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (29.941816366404606, 0.0), (639.0581836335954, 411.0)]">
         <g transform="translate(29.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="29.941816366404606" y="0.0" width="639.0581836335954" height="411.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 7752e9850..bf38d8e9a 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
         <g transform="translate(27.034701220281416 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="27.034701220281416" y="0.0" width="641.9652987797186" height="411.0">
             </rect>
           </clipPath>
@@ -366,6 +366,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 a004ba968..d1c22f4be 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -324,7 +324,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (641.9652987797186, 411.0)]">
         <g transform="translate(27.034701220281416 0.0 ) ">
           <g>
             <g>
@@ -344,7 +344,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="27.034701220281416" y="0.0" width="641.9652987797186" height="411.0">
             </rect>
           </clipPath>
@@ -366,6 +366,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" 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 320c4c173..927a80d1d 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -177,7 +177,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (50.97651758668602, 0.0), (618.023482413314, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (50.97651758668602, 0.0), (618.023482413314, 411.0)]">
         <g transform="translate(50.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="50.97651758668602" y="0.0" width="618.023482413314" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="50.97651758668602" y="0.0" width="618.023482413314" height="411.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 75e8ad0d1..2a18610e2 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <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(29.5 6.5 ) ">
@@ -316,7 +316,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (50.97651758668602, 0.0), (618.023482413314, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_2)" clip-bounds-jfx="[rect (50.97651758668602, 0.0), (618.023482413314, 411.0)]">
         <g transform="translate(50.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="50.97651758668602" y="0.0" width="618.023482413314" height="411.0">
             </rect>
           </clipPath>
         </defs>
         <defs>
-          <clipPath id="xXxprefixXx2">
+          <clipPath id="_sample_helper_static_id_prefix_2">
             <rect x="50.97651758668602" y="0.0" width="618.023482413314" height="411.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 5377257f8..a5b56f2da 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M80.82415283190454 0.0 L80.82415283190454 470.0 L624.1758471680955 470.0 L624.1758471680955 0.0 Z">
     </path>
     <g transform="translate(110.32415283190454 6.5 ) ">
@@ -155,7 +155,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (38.40018069752042, 0.0), (411.0, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (38.40018069752042, 0.0), (411.0, 411.0)]">
         <g transform="translate(38.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="38.40018069752042" y="0.0" width="411.0" height="411.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="M80.82415283190454 0.0 L80.82415283190454 470.0 L624.1758471680955 470.0 L624.1758471680955 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 682b949f0..408646bec 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M80.82415283190454 0.0 L80.82415283190454 470.0 L624.1758471680955 470.0 L624.1758471680955 0.0 Z">
     </path>
     <g transform="translate(110.32415283190454 6.5 ) ">
@@ -209,7 +209,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (38.40018069752042, 0.0), (411.0, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (38.40018069752042, 0.0), (411.0, 411.0)]">
         <g transform="translate(38.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="38.40018069752042" y="0.0" width="411.0" height="411.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="M80.82415283190454 0.0 L80.82415283190454 470.0 L624.1758471680955 470.0 L624.1758471680955 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 7d9be19ab..1e606f2b2 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M96.80083120804113 0.0 L96.80083120804113 470.0 L608.1991687919589 470.0 L608.1991687919589 0.0 Z">
     </path>
     <g transform="translate(126.30083120804113 6.5 ) ">
@@ -171,7 +171,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (448.3636363636363, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (448.3636363636363, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="448.3636363636363" height="411.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="M96.80083120804113 0.0 L96.80083120804113 470.0 L608.1991687919589 470.0 L608.1991687919589 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 35fa4c580..97f17495f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M96.80083120804113 0.0 L96.80083120804113 470.0 L608.1991687919589 470.0 L608.1991687919589 0.0 Z">
     </path>
     <g transform="translate(126.30083120804113 6.5 ) ">
@@ -279,7 +279,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (448.3636363636363, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (27.034701220281416, 0.0), (448.3636363636363, 411.0)]">
         <g transform="translate(27.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="27.034701220281416" y="0.0" width="448.3636363636363" height="411.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="M96.80083120804113 0.0 L96.80083120804113 470.0 L608.1991687919589 470.0 L608.1991687919589 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 aaf1a68f7..b52fd9231 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M276.1346972722659 0.0 L276.1346972722659 470.0 L428.8653027277341 470.0 L428.8653027277341 0.0 Z">
     </path>
     <g transform="translate(305.6346972722659 6.5 ) ">
@@ -153,7 +153,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (102.75, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (102.75, 411.0)]">
         <g transform="translate(13.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -169,7 +169,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="13.980605455468202" y="0.0" width="102.75" height="411.0">
             </rect>
           </clipPath>
@@ -234,6 +234,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M276.1346972722659 0.0 L276.1346972722659 470.0 L428.8653027277341 470.0 L428.8653027277341 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 e11aba01b..48eaef205 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M276.1346972722659 0.0 L276.1346972722659 470.0 L428.8653027277341 470.0 L428.8653027277341 0.0 Z">
     </path>
     <g transform="translate(305.6346972722659 6.5 ) ">
@@ -196,7 +196,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (102.75, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (13.980605455468202, 0.0), (102.75, 411.0)]">
         <g transform="translate(13.980605455468202 0.0 ) ">
           <g>
             <g>
@@ -212,7 +212,7 @@ font-size: 13.0px;
           </g>
         </g>
         <defs>
-          <clipPath id="xXxprefixXx1">
+          <clipPath id="_sample_helper_static_id_prefix_1">
             <rect x="13.980605455468202" y="0.0" width="102.75" height="411.0">
             </rect>
           </clipPath>
@@ -234,6 +234,6 @@ font-size: 13.0px;
     <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(187,187,187)" stroke-opacity="1.0" stroke-width="0.0" d="M276.1346972722659 0.0 L276.1346972722659 470.0 L428.8653027277341 470.0 L428.8653027277341 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 ef881d053..640fe1637 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M42.76591771230716 0.0 L42.76591771230716 470.0 L662.2340822876929 470.0 L662.2340822876929 0.0 Z">
     </path>
     <g transform="translate(72.26591771230716 6.5 ) ">
@@ -157,7 +157,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (37.92242182187281, 0.0), (485.72727272727275, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (37.92242182187281, 0.0), (485.72727272727275, 411.0)]">
         <g transform="translate(37.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="37.92242182187281" y="0.0" width="485.72727272727275" height="411.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="M42.76591771230716 0.0 L42.76591771230716 470.0 L662.2340822876929 470.0 L662.2340822876929 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 91b7291cb..58a27c9b1 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M42.76591771230716 0.0 L42.76591771230716 470.0 L662.2340822876929 470.0 L662.2340822876929 0.0 Z">
     </path>
     <g transform="translate(72.26591771230716 6.5 ) ">
@@ -220,7 +220,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (37.92242182187281, 0.0), (485.72727272727275, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (37.92242182187281, 0.0), (485.72727272727275, 411.0)]">
         <g transform="translate(37.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="37.92242182187281" y="0.0" width="485.72727272727275" height="411.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="M42.76591771230716 0.0 L42.76591771230716 470.0 L662.2340822876929 470.0 L662.2340822876929 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 003a0e5fa..c117c8238 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M18.08511064446759 0.0 L18.08511064446759 470.0 L686.9148893555324 470.0 L686.9148893555324 0.0 Z">
     </path>
     <g transform="translate(47.58511064446759 6.5 ) ">
@@ -157,7 +157,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (37.92242182187281, 0.0), (531.8823529411765, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (37.92242182187281, 0.0), (531.8823529411765, 411.0)]">
         <g transform="translate(37.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="37.92242182187281" y="0.0" width="531.8823529411765" height="411.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="M18.08511064446759 0.0 L18.08511064446759 470.0 L686.9148893555324 470.0 L686.9148893555324 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 2b41ae7e6..2c520f282 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M18.08511064446759 0.0 L18.08511064446759 470.0 L686.9148893555324 470.0 L686.9148893555324 0.0 Z">
     </path>
     <g transform="translate(47.58511064446759 6.5 ) ">
@@ -220,7 +220,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (37.92242182187281, 0.0), (531.8823529411765, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (37.92242182187281, 0.0), (531.8823529411765, 411.0)]">
         <g transform="translate(37.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="37.92242182187281" y="0.0" width="531.8823529411765" height="411.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="M18.08511064446759 0.0 L18.08511064446759 470.0 L686.9148893555324 470.0 L686.9148893555324 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 a000ba5b3..19947d01f 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M117.5 0.0 L117.5 470.0 L587.5 470.0 L587.5 0.0 Z">
     </path>
     <g transform="translate(124.0 6.5 ) ">
@@ -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), (457.0, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (457.0, 457.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="457.0" height="457.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="M117.5 0.0 L117.5 470.0 L587.5 470.0 L587.5 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 46bb50998..e374e9eaa 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M117.5 0.0 L117.5 470.0 L587.5 470.0 L587.5 0.0 Z">
     </path>
     <g transform="translate(124.0 6.5 ) ">
@@ -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), (457.0, 457.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (0.0, 0.0), (457.0, 457.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="457.0" height="457.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="M117.5 0.0 L117.5 470.0 L587.5 470.0 L587.5 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 49b382e1e..230931ae7 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #474747;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M42.08706218435833 0.0 L42.08706218435833 470.0 L662.9129378156417 470.0 L662.9129378156417 0.0 Z">
     </path>
     <g transform="translate(71.58706218435833 6.5 ) ">
@@ -155,7 +155,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (69.10410366084425, 0.0), (450.7741935483871, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (69.10410366084425, 0.0), (450.7741935483871, 411.0)]">
         <g transform="translate(69.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="69.10410366084425" y="0.0" width="450.7741935483871" height="411.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="M42.08706218435833 0.0 L42.08706218435833 470.0 L662.9129378156417 470.0 L662.9129378156417 0.0 Z" pointer-events="none">
     </path>
   </g>
-  <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 bab5c68b5..77b5ddf60 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: Lucida Grande, sans-serif;
 font-size: 16.0px;
 
 }
-#xXxprefixXx0 .plot-subtitle {
+#_sample_helper_static_id_prefix_0 .plot-subtitle {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .plot-caption {
+#_sample_helper_static_id_prefix_0 .plot-caption {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .hyperlink-element {
+#_sample_helper_static_id_prefix_0 .hyperlink-element {
 fill: #118ed8;
 font-weight: normal;
    font-style: normal;
 }
-#xXxprefixXx0 .legend-title {
+#_sample_helper_static_id_prefix_0 .legend-title {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .legend-item {
+#_sample_helper_static_id_prefix_0 .legend-item {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-x {
+#_sample_helper_static_id_prefix_0 .axis-title-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-x {
+#_sample_helper_static_id_prefix_0 .axis-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .axis-title-y {
+#_sample_helper_static_id_prefix_0 .axis-title-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 15.0px;
 
 }
-#xXxprefixXx0 .axis-text-y {
+#_sample_helper_static_id_prefix_0 .axis-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-x {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-x {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, sans-serif;
 font-size: 13.0px;
 
 }
-#xXxprefixXx0 .facet-strip-text-y {
+#_sample_helper_static_id_prefix_0 .facet-strip-text-y {
 fill: #bbbbbb;
 font-weight: normal;
    font-style: normal;font-family: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, 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: Lucida Grande, sans-serif;
@@ -129,7 +129,7 @@ font-size: 13.0px;
 }
 
   </style>
-  <g id="xXxprefixXx0">
+  <g id="_sample_helper_static_id_prefix_0">
     <path fill-rule="evenodd" fill="rgb(25,25,28)" fill-opacity="1.0" d="M42.08706218435833 0.0 L42.08706218435833 470.0 L662.9129378156417 470.0 L662.9129378156417 0.0 Z">
     </path>
     <g transform="translate(71.58706218435833 6.5 ) ">
@@ -209,7 +209,7 @@ font-size: 13.0px;
           </g>
         </g>
       </g>
-      <g clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (69.10410366084425, 0.0), (450.7741935483871, 411.0)]">
+      <g clip-path="url(#_sample_helper_static_id_prefix_1)" clip-bounds-jfx="[rect (69.10410366084425, 0.0), (450.7741935483871, 411.0)]">
         <g transform="translate(69.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="69.10410366084425" y="0.0" width="450.7741935483871" height="411.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="M42.08706218435833 0.0 L42.08706218435833 470.0 L662.9129378156417 470.0 L662.9129378156417 0.0 Z" pointer-events="none">
     </path>
   </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..cdc7db035 100644
--- a/docs/kd.tree
+++ b/docs/kd.tree
@@ -251,4 +251,6 @@
         </toc-element>
     </toc-element>
     <toc-element topic="FAQ.md"/>
+    <toc-element topic="_shadow_resources.md" hidden="true"/>
+    <toc-element topic="quickstart2.md"/>
 </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/topics/guides/Anscombes-Quartet-Guide.md b/docs/topics/guides/Anscombes-Quartet-Guide.md
index e4409c3bd..3ccbf6104 100644
--- a/docs/topics/guides/Anscombes-Quartet-Guide.md
+++ b/docs/topics/guides/Anscombes-Quartet-Guide.md
@@ -22,7 +22,7 @@ This guide offers a clear pathway to visualize and understand this classic examp
 
 ```kotlin
 val df =
-    DataFrame.readCSV(
+    DataFrame.readCsv(
         "https://gist.githubusercontent.com/ericbusboom/b2ac1d366c005cd2ed8c/raw/c92c66e43d144fa9c29dbd602d5af6988e8db533/anscombes.csv",
         parserOptions = ParserOptions(locale = Locale.ENGLISH)
     )
diff --git a/docs/topics/guides/Boxplot-Guide.md b/docs/topics/guides/Boxplot-Guide.md
index 5824cc45b..fa352d84b 100644
--- a/docs/topics/guides/Boxplot-Guide.md
+++ b/docs/topics/guides/Boxplot-Guide.md
@@ -516,7 +516,7 @@ of old ones.
 ```kotlin
 // Use "mpg" dataset
 val mpgDF =
-    DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+    DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 mpgDF.head()
 ```
 
diff --git a/docs/topics/guides/Count-Plot-Guide.md b/docs/topics/guides/Count-Plot-Guide.md
index e7e991228..d00bef9ee 100644
--- a/docs/topics/guides/Count-Plot-Guide.md
+++ b/docs/topics/guides/Count-Plot-Guide.md
@@ -69,7 +69,7 @@ They can be simply `Iterable` (`List`, `Set`, etc.) or a reference to a column i
 ```kotlin
 // Use "mpg" dataset
 val mpgDF =
-    DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+    DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 mpgDF.head(5)
 ```
 
diff --git a/docs/topics/guides/Facets-Guide.md b/docs/topics/guides/Facets-Guide.md
index c95592792..9520a6ab4 100644
--- a/docs/topics/guides/Facets-Guide.md
+++ b/docs/topics/guides/Facets-Guide.md
@@ -39,7 +39,7 @@ To learn more about formatting templates, see:
 <!---FUN guideFacetsReadDataFrame-->
 
 ```kotlin
-val dataset = DataFrame.readCSV(
+val dataset = DataFrame.readCsv(
     "https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg2.csv",
     parserOptions = ParserOptions(Locale.ENGLISH)
 )
diff --git a/docs/topics/guides/Formatting-Guide.md b/docs/topics/guides/Formatting-Guide.md
index 3ec69e888..c193a5165 100644
--- a/docs/topics/guides/Formatting-Guide.md
+++ b/docs/topics/guides/Formatting-Guide.md
@@ -207,7 +207,7 @@ Let's apply the format string to the date `Aug 6, 2019` and the time `4:46:35`:
 
 ```kotlin
 // The US Unemployment Rates 2000-2016
-val economics = DataFrame.readCSV(
+val economics = DataFrame.readCsv(
     "https://vincentarelbundock.github.io/Rdatasets/csv/ggplot2/economics.csv",
     parserOptions = ParserOptions(Locale.ENGLISH)
 ).filter { "date"<LocalDate>() >= LocalDate(2001, 1, 1) }
diff --git a/docs/topics/guides/Geo-Plotting-Guide.md b/docs/topics/guides/Geo-Plotting-Guide.md
index cf9b80500..9c784a51e 100644
--- a/docs/topics/guides/Geo-Plotting-Guide.md
+++ b/docs/topics/guides/Geo-Plotting-Guide.md
@@ -593,7 +593,7 @@ with the results of the 2024 US presidential election:
 
 ```kotlin
 val usa2024electionResults =
-    DataFrame.readCSV("https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv")
+    DataFrame.readCsv("https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv")
 
 usa2024electionResults
 ```
diff --git a/docs/topics/guides/Heatmap-Guide.md b/docs/topics/guides/Heatmap-Guide.md
index d8f85ff38..9868e72f9 100644
--- a/docs/topics/guides/Heatmap-Guide.md
+++ b/docs/topics/guides/Heatmap-Guide.md
@@ -74,7 +74,7 @@ They can be simply `Iterable` (`List`, `Set`, etc.) or a reference to a column i
 ```kotlin
 // Use "mpg" dataset
 val mpgDF =
-    DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+    DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 mpgDF.head(5)
 ```
 
diff --git a/docs/topics/guides/Jitter-Points-Guide.md b/docs/topics/guides/Jitter-Points-Guide.md
index 9a8e4ef86..98fd3bf41 100644
--- a/docs/topics/guides/Jitter-Points-Guide.md
+++ b/docs/topics/guides/Jitter-Points-Guide.md
@@ -18,7 +18,7 @@ a Kotlin-based solution for enhancing data visualization clarity and detail.
 <!---IMPORT org.jetbrains.kotlinx.kandy.letsplot.samples.guides.JitterPoints-->
 
 ```kotlin
-val mpgDf = DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+val mpgDf = DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 mpgDf.head()
 ```
 
diff --git a/docs/topics/guides/Legend-and-Axis-Guide.md b/docs/topics/guides/Legend-and-Axis-Guide.md
index 272b4cb29..bef89b24c 100644
--- a/docs/topics/guides/Legend-and-Axis-Guide.md
+++ b/docs/topics/guides/Legend-and-Axis-Guide.md
@@ -20,7 +20,7 @@ Dive into the nuances of plot customization with Kandy's Legend and Axis guide.
 
 ```kotlin
 val mpgDf =
-    DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+    DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 mpgDf.head()
 ```
 
diff --git a/docs/topics/guides/Lines-Guide.md b/docs/topics/guides/Lines-Guide.md
index 9386405f8..f72082f8d 100644
--- a/docs/topics/guides/Lines-Guide.md
+++ b/docs/topics/guides/Lines-Guide.md
@@ -19,7 +19,7 @@ This guide offers insights into creating impactful line charts, showcasing data
 
 ```kotlin
 val mpgDf =
-    DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+    DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 mpgDf.head()
 ```
 
diff --git a/docs/topics/guides/Quick-Start-Guide.md b/docs/topics/guides/Quick-Start-Guide.md
index 7466c9b62..66702988d 100644
--- a/docs/topics/guides/Quick-Start-Guide.md
+++ b/docs/topics/guides/Quick-Start-Guide.md
@@ -515,7 +515,7 @@ as you can utilize auto-generated property columns without manually creating col
 ```kotlin
 // Reading a CSV file into a DataFrame
 val mpgDF =
-    DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+    DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 // Display the first five rows of the DataFrame
 mpgDF.head()
 ```
diff --git a/docs/topics/guides/Styles-Guide.md b/docs/topics/guides/Styles-Guide.md
index 69dffbd56..e1fdf7249 100644
--- a/docs/topics/guides/Styles-Guide.md
+++ b/docs/topics/guides/Styles-Guide.md
@@ -23,7 +23,7 @@ Discover how to select and apply styles for more engaging and informative charts
 
 ```kotlin
 val df =
-    DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+    DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 df.head(3)
 ```
 
diff --git a/docs/topics/guides/Title-Subtitle-Caption-Guide.md b/docs/topics/guides/Title-Subtitle-Caption-Guide.md
index e9e685021..5111881b8 100644
--- a/docs/topics/guides/Title-Subtitle-Caption-Guide.md
+++ b/docs/topics/guides/Title-Subtitle-Caption-Guide.md
@@ -22,7 +22,7 @@ and learn how to add descriptive elements to your charts for better clarity and
 
 ```kotlin
 val mpgDf =
-    DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+    DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 mpgDf.head()
 ```
 
diff --git a/docs/topics/guides/Tooltips-Guide.md b/docs/topics/guides/Tooltips-Guide.md
index 40b0539ac..4e566ba20 100644
--- a/docs/topics/guides/Tooltips-Guide.md
+++ b/docs/topics/guides/Tooltips-Guide.md
@@ -49,7 +49,7 @@ Set the list of variables to place them in a multiline tooltip with the default
 
 ```kotlin
 val mpgDf =
-    DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+    DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 mpgDf.head()
 ```
 
@@ -252,7 +252,7 @@ Move the tooltips to the top right corner:
 <!---FUN guideTooltipReadIrisDf-->
 
 ```kotlin
-val irisDf = DataFrame.readCSV(
+val irisDf = DataFrame.readCsv(
     "https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/iris.csv",
     parserOptions = ParserOptions(Locale.ENGLISH)
 )
diff --git a/docs/topics/samples/densityPlot/Density-Plot-With-Histogram.md b/docs/topics/samples/densityPlot/Density-Plot-With-Histogram.md
index 3b0c4bdfb..b58d90a82 100644
--- a/docs/topics/samples/densityPlot/Density-Plot-With-Histogram.md
+++ b/docs/topics/samples/densityPlot/Density-Plot-With-Histogram.md
@@ -20,7 +20,7 @@ Dive into 'Density Plot With Histogram' using Kotlin and Kandy, showing multiple
 <!---FUN densityPlot_with_histogram-->
 
 ```kotlin
-val df = DataFrame.readCSV(
+val df = DataFrame.readCsv(
     fileOrUrl = "https://raw.githubusercontent.com/Kotlin/dataframe/master/examples/idea-examples/titanic/src/main/resources/titanic.csv",
     delimiter = ';', parserOptions = ParserOptions(locale = java.util.Locale.FRENCH)
 )
diff --git a/docs/topics/samples/geo/USA-States-Election-Results-Map-(Joined-Datasets).md b/docs/topics/samples/geo/USA-States-Election-Results-Map-(Joined-Datasets).md
index 550cd3d45..adf7bc91e 100644
--- a/docs/topics/samples/geo/USA-States-Election-Results-Map-(Joined-Datasets).md
+++ b/docs/topics/samples/geo/USA-States-Election-Results-Map-(Joined-Datasets).md
@@ -34,7 +34,7 @@ val usaAdjusted = usaStates.modify {
 }
 
 val usa2024electionResults =
-    DataFrame.readCSV("https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv")
+    DataFrame.readCsv("https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv")
 val winner by column<String>()
 
 val usaStatesWithElectionResults = usaAdjusted.modify {
diff --git a/docs/topics/samples/heatmap/Heatmap-Settings.md b/docs/topics/samples/heatmap/Heatmap-Settings.md
index 2079b996e..5e32183b3 100644
--- a/docs/topics/samples/heatmap/Heatmap-Settings.md
+++ b/docs/topics/samples/heatmap/Heatmap-Settings.md
@@ -20,7 +20,7 @@ Explore the 'Heatmap Settings' example using Kotlin and Kandy to understand the
 <!---FUN heatmap_settings-->
 
 ```kotlin
-val df = DataFrame.readCSV(
+val df = DataFrame.readCsv(
     fileOrUrl = "https://raw.githubusercontent.com/Kotlin/dataframe/master/examples/idea-examples/titanic/src/main/resources/titanic.csv",
     delimiter = ';', parserOptions = ParserOptions(locale = java.util.Locale.FRENCH)
 )
diff --git a/docs/topics/samples/layout/Axis-And-Legend-Configuration.md b/docs/topics/samples/layout/Axis-And-Legend-Configuration.md
index 39531a857..dfa13b4cc 100644
--- a/docs/topics/samples/layout/Axis-And-Legend-Configuration.md
+++ b/docs/topics/samples/layout/Axis-And-Legend-Configuration.md
@@ -19,7 +19,7 @@ Dive into 'Axis And Legend Configuration' using Kotlin and Kandy, full and detai
 
 ```kotlin
 val df =
-    DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+    DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 
 df.plot {
     points {
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/examples/notebooks/lets-plot/dev/coord_flip.ipynb b/examples/notebooks/lets-plot/dev/coord_flip.ipynb
index 9705b87d8..337755c50 100644
--- a/examples/notebooks/lets-plot/dev/coord_flip.ipynb
+++ b/examples/notebooks/lets-plot/dev/coord_flip.ipynb
@@ -458,7 +458,7 @@
     }
    ],
    "source": [
-    "var mpg = DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "var mpg = DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpg.head(3)"
    ]
   },
diff --git a/examples/notebooks/lets-plot/dev/geom_violin.ipynb b/examples/notebooks/lets-plot/dev/geom_violin.ipynb
index db8226f97..d17de8f96 100644
--- a/examples/notebooks/lets-plot/dev/geom_violin.ipynb
+++ b/examples/notebooks/lets-plot/dev/geom_violin.ipynb
@@ -344,7 +344,7 @@
     }
    ],
    "source": [
-    "var mpg = DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "var mpg = DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpg.head()"
    ]
   },
diff --git a/examples/notebooks/lets-plot/dev/ordering_examples.ipynb b/examples/notebooks/lets-plot/dev/ordering_examples.ipynb
index e293bcb93..5b428ce49 100644
--- a/examples/notebooks/lets-plot/dev/ordering_examples.ipynb
+++ b/examples/notebooks/lets-plot/dev/ordering_examples.ipynb
@@ -344,7 +344,7 @@
     }
    ],
    "source": [
-    "val mpg = DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "val mpg = DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpg.head(3)\n"
    ]
   },
@@ -2815,7 +2815,7 @@
    "source": [
     "// diamonds\n",
     "\n",
-    "val diamonds = DataFrame.readCSV(\"https://vincentarelbundock.github.io/Rdatasets/csv/ggplot2/diamonds.csv\")\n",
+    "val diamonds = DataFrame.readCsv(\"https://vincentarelbundock.github.io/Rdatasets/csv/ggplot2/diamonds.csv\")\n",
     "diamonds.head(3)"
    ]
   },
diff --git a/examples/notebooks/lets-plot/dev/qq_plots.ipynb b/examples/notebooks/lets-plot/dev/qq_plots.ipynb
index f04ae46e8..f645bee29 100644
--- a/examples/notebooks/lets-plot/dev/qq_plots.ipynb
+++ b/examples/notebooks/lets-plot/dev/qq_plots.ipynb
@@ -344,7 +344,7 @@
     }
    ],
    "source": [
-    "var mpg = DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "var mpg = DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpg.head(3)\n"
    ]
   },
diff --git a/examples/notebooks/lets-plot/dev/y_orientation.ipynb b/examples/notebooks/lets-plot/dev/y_orientation.ipynb
index ba0a479be..e96b5e06f 100644
--- a/examples/notebooks/lets-plot/dev/y_orientation.ipynb
+++ b/examples/notebooks/lets-plot/dev/y_orientation.ipynb
@@ -348,7 +348,7 @@
     }
    ],
    "source": [
-    "var mpg = DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "var mpg = DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpg.head(3)\n"
    ]
   },
diff --git a/examples/notebooks/lets-plot/guides/anscombes_quartet.ipynb b/examples/notebooks/lets-plot/guides/anscombes_quartet.ipynb
index f5526faad..fe39fdea5 100644
--- a/examples/notebooks/lets-plot/guides/anscombes_quartet.ipynb
+++ b/examples/notebooks/lets-plot/guides/anscombes_quartet.ipynb
@@ -31,7 +31,7 @@
    "cell_type": "code",
    "source": [
     "val df =\n",
-    "    DataFrame.readCSV(\n",
+    "    DataFrame.readCsv(\n",
     "        \"https://gist.githubusercontent.com/ericbusboom/b2ac1d366c005cd2ed8c/raw/c92c66e43d144fa9c29dbd602d5af6988e8db533/anscombes.csv\",\n",
     "        parserOptions = ParserOptions(locale = Locale.ENGLISH)\n",
     "    )\n",
diff --git a/examples/notebooks/lets-plot/guides/boxplot.ipynb b/examples/notebooks/lets-plot/guides/boxplot.ipynb
index 8e52ced8c..115b6d6b2 100644
--- a/examples/notebooks/lets-plot/guides/boxplot.ipynb
+++ b/examples/notebooks/lets-plot/guides/boxplot.ipynb
@@ -40430,7 +40430,7 @@
    "source": [
     "// Use \"mpg\" dataset\n",
     "val mpgDF =\n",
-    "    DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "    DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpgDF.head()"
    ],
    "metadata": {
diff --git a/examples/notebooks/lets-plot/guides/count_plot.ipynb b/examples/notebooks/lets-plot/guides/count_plot.ipynb
index f673e81d8..2f380d27f 100644
--- a/examples/notebooks/lets-plot/guides/count_plot.ipynb
+++ b/examples/notebooks/lets-plot/guides/count_plot.ipynb
@@ -155,7 +155,7 @@
    "source": [
     "// Use \"mpg\" dataset\n",
     "val mpgDF =\n",
-    "    DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "    DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpgDF.head(5)"
    ],
    "metadata": {
diff --git a/examples/notebooks/lets-plot/guides/facets.ipynb b/examples/notebooks/lets-plot/guides/facets.ipynb
index 25177616d..4f22d5c46 100644
--- a/examples/notebooks/lets-plot/guides/facets.ipynb
+++ b/examples/notebooks/lets-plot/guides/facets.ipynb
@@ -53,7 +53,7 @@
    "source": [
     "import java.util.Locale\n",
     "\n",
-    "val data = DataFrame.readCSV(\n",
+    "val data = DataFrame.readCsv(\n",
     "    \"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg2.csv\",\n",
     "    parserOptions = ParserOptions(Locale.ENGLISH)\n",
     ")\n",
diff --git a/examples/notebooks/lets-plot/guides/geo_guide.ipynb b/examples/notebooks/lets-plot/guides/geo_guide.ipynb
index 18f6792c4..c340d0f3a 100644
--- a/examples/notebooks/lets-plot/guides/geo_guide.ipynb
+++ b/examples/notebooks/lets-plot/guides/geo_guide.ipynb
@@ -24741,7 +24741,7 @@
    },
    "cell_type": "code",
    "source": [
-    "val usa2024electionResults = DataFrame.readCSV(\"https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv\")\n",
+    "val usa2024electionResults = DataFrame.readCsv(\"https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv\")\n",
     "\n",
     "usa2024electionResults"
    ],
diff --git a/examples/notebooks/lets-plot/guides/heatmap.ipynb b/examples/notebooks/lets-plot/guides/heatmap.ipynb
index 1a42cbdc3..48d283481 100644
--- a/examples/notebooks/lets-plot/guides/heatmap.ipynb
+++ b/examples/notebooks/lets-plot/guides/heatmap.ipynb
@@ -159,7 +159,7 @@
    "source": [
     "// Use \"mpg\" dataset\n",
     "val mpgDF =\n",
-    "    DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "    DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpgDF.head(5)"
    ],
    "metadata": {
diff --git a/examples/notebooks/lets-plot/guides/jitter_points.ipynb b/examples/notebooks/lets-plot/guides/jitter_points.ipynb
index 3115d5f88..6dd6ef663 100644
--- a/examples/notebooks/lets-plot/guides/jitter_points.ipynb
+++ b/examples/notebooks/lets-plot/guides/jitter_points.ipynb
@@ -27,7 +27,7 @@
     }
    },
    "source": [
-    "val mpgDf = DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "val mpgDf = DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpgDf.head()"
    ],
    "outputs": [
diff --git a/examples/notebooks/lets-plot/guides/label_format.ipynb b/examples/notebooks/lets-plot/guides/label_format.ipynb
index c5c4b997c..53baff10c 100644
--- a/examples/notebooks/lets-plot/guides/label_format.ipynb
+++ b/examples/notebooks/lets-plot/guides/label_format.ipynb
@@ -36,7 +36,7 @@
    },
    "source": [
     "// The US Unemployment Rates 2000-2016\n",
-    "val economics = DataFrame.readCSV(\n",
+    "val economics = DataFrame.readCsv(\n",
     "    \"https://vincentarelbundock.github.io/Rdatasets/csv/ggplot2/economics.csv\",\n",
     "    parserOptions = ParserOptions(Locale.ENGLISH)\n",
     ").filter { \"date\"<LocalDate>() >= LocalDate(2001, 1, 1) }\n",
diff --git a/examples/notebooks/lets-plot/guides/legend_and_axis.ipynb b/examples/notebooks/lets-plot/guides/legend_and_axis.ipynb
index 6941c1716..3c14151c0 100644
--- a/examples/notebooks/lets-plot/guides/legend_and_axis.ipynb
+++ b/examples/notebooks/lets-plot/guides/legend_and_axis.ipynb
@@ -26,7 +26,7 @@
    },
    "source": [
     "val mpgDf =\n",
-    "    DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "    DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpgDf.head()"
    ],
    "outputs": [
diff --git a/examples/notebooks/lets-plot/guides/lines.ipynb b/examples/notebooks/lets-plot/guides/lines.ipynb
index bcad008e5..bef971300 100644
--- a/examples/notebooks/lets-plot/guides/lines.ipynb
+++ b/examples/notebooks/lets-plot/guides/lines.ipynb
@@ -30,7 +30,7 @@
    "cell_type": "code",
    "source": [
     "val mpgDf =\n",
-    "    DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "    DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpgDf.head()"
    ],
    "metadata": {
diff --git a/examples/notebooks/lets-plot/guides/quick_start_guide.ipynb b/examples/notebooks/lets-plot/guides/quick_start_guide.ipynb
index 9c8451a5d..e3750a869 100644
--- a/examples/notebooks/lets-plot/guides/quick_start_guide.ipynb
+++ b/examples/notebooks/lets-plot/guides/quick_start_guide.ipynb
@@ -6326,7 +6326,7 @@
    "source": [
     "// Reading a CSV file into a DataFrame\n",
     "val mpgDF =\n",
-    "    DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "    DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "// Display the first five rows of the DataFrame\n",
     "mpgDF.head()"
    ],
diff --git a/examples/notebooks/lets-plot/guides/styles.ipynb b/examples/notebooks/lets-plot/guides/styles.ipynb
index 670ba5e3d..f6e141cd3 100644
--- a/examples/notebooks/lets-plot/guides/styles.ipynb
+++ b/examples/notebooks/lets-plot/guides/styles.ipynb
@@ -42,7 +42,7 @@
    },
    "source": [
     "val df =\n",
-    "    DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "    DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "df.head(3)"
    ],
    "outputs": [
diff --git a/examples/notebooks/lets-plot/guides/title_subtitle_caption.ipynb b/examples/notebooks/lets-plot/guides/title_subtitle_caption.ipynb
index 5091eff32..6d184868a 100644
--- a/examples/notebooks/lets-plot/guides/title_subtitle_caption.ipynb
+++ b/examples/notebooks/lets-plot/guides/title_subtitle_caption.ipynb
@@ -26,7 +26,7 @@
    },
    "source": [
     "val mpgDf =\n",
-    "    DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "    DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpgDf.head()"
    ],
    "outputs": [
diff --git a/examples/notebooks/lets-plot/guides/tooltips.ipynb b/examples/notebooks/lets-plot/guides/tooltips.ipynb
index 40c6cbc8f..8e5b6089b 100644
--- a/examples/notebooks/lets-plot/guides/tooltips.ipynb
+++ b/examples/notebooks/lets-plot/guides/tooltips.ipynb
@@ -65,7 +65,7 @@
    "cell_type": "code",
    "source": [
     "val mpgDf =\n",
-    "    DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "    DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "mpgDf.head()"
    ],
    "metadata": {
@@ -10945,7 +10945,7 @@
   {
    "cell_type": "code",
    "source": [
-    "val irisDf = DataFrame.readCSV(\n",
+    "val irisDf = DataFrame.readCsv(\n",
     "    \"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/iris.csv\",\n",
     "    parserOptions = ParserOptions(Locale.ENGLISH)\n",
     ")\n",
diff --git a/examples/notebooks/lets-plot/samples/densityPlot/densityPlot_with_histogram.ipynb b/examples/notebooks/lets-plot/samples/densityPlot/densityPlot_with_histogram.ipynb
index baa354b14..46b7d6d28 100644
--- a/examples/notebooks/lets-plot/samples/densityPlot/densityPlot_with_histogram.ipynb
+++ b/examples/notebooks/lets-plot/samples/densityPlot/densityPlot_with_histogram.ipynb
@@ -20,7 +20,7 @@
   {
    "cell_type": "code",
    "source": [
-    "val df = DataFrame.readCSV(\n",
+    "val df = DataFrame.readCsv(\n",
     "    fileOrUrl = \"https://raw.githubusercontent.com/Kotlin/dataframe/master/examples/idea-examples/titanic/src/main/resources/titanic.csv\",\n",
     "    delimiter = ';', parserOptions = ParserOptions(locale = java.util.Locale.FRENCH)\n",
     ")\n",
diff --git a/examples/notebooks/lets-plot/samples/geo/usa_election_results_joined.ipynb b/examples/notebooks/lets-plot/samples/geo/usa_election_results_joined.ipynb
index 5b58d6731..22da63de5 100644
--- a/examples/notebooks/lets-plot/samples/geo/usa_election_results_joined.ipynb
+++ b/examples/notebooks/lets-plot/samples/geo/usa_election_results_joined.ipynb
@@ -61,7 +61,7 @@
     }
    },
    "cell_type": "code",
-   "source": "val usa2024electionResults = DataFrame.readCSV(\"https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv\")",
+   "source": "val usa2024electionResults = DataFrame.readCsv(\"https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv\")",
    "outputs": [],
    "execution_count": 4
   },
diff --git a/examples/notebooks/lets-plot/samples/heatmap/heatmap_settings.ipynb b/examples/notebooks/lets-plot/samples/heatmap/heatmap_settings.ipynb
index 769116d4e..fa0c2fc1c 100644
--- a/examples/notebooks/lets-plot/samples/heatmap/heatmap_settings.ipynb
+++ b/examples/notebooks/lets-plot/samples/heatmap/heatmap_settings.ipynb
@@ -20,7 +20,7 @@
   {
    "cell_type": "code",
    "source": [
-    "val df = DataFrame.readCSV(\n",
+    "val df = DataFrame.readCsv(\n",
     "    fileOrUrl = \"https://raw.githubusercontent.com/Kotlin/dataframe/master/examples/idea-examples/titanic/src/main/resources/titanic.csv\",\n",
     "    delimiter = ';', parserOptions = ParserOptions(locale = java.util.Locale.FRENCH)\n",
     ")\n",
diff --git a/examples/notebooks/lets-plot/samples/layout/axis_and_legend_configuration.ipynb b/examples/notebooks/lets-plot/samples/layout/axis_and_legend_configuration.ipynb
index 4522fff62..0330f452b 100644
--- a/examples/notebooks/lets-plot/samples/layout/axis_and_legend_configuration.ipynb
+++ b/examples/notebooks/lets-plot/samples/layout/axis_and_legend_configuration.ipynb
@@ -20,7 +20,7 @@
   {
    "cell_type": "code",
    "source": [
-    "val df = DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
+    "val df = DataFrame.readCsv(\"https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv\")\n",
     "\n",
     "df.plot {\n",
     "    points {\n",
diff --git a/gradle.properties b/gradle.properties
index 6f8d41826..7bdc361fe 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -1,4 +1,4 @@
-version=0.8.0
+version=0.8.1
 kotlin.code.style=official
 kotlin.jupyter.add.scanner=true
 # Gradle
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 4db1eda12..e959a0b47 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -7,11 +7,11 @@ nexus = "1.3.0"
 jupyterApi = "0.12.0-250"
 
 # libraries version
-dataframe = "0.15.0"
+dataframe = "1.0.0-dev-6428"
 serialization = "1.6.3"
 datetime = "0.6.0"
 html = "0.11.0"
-statistics = "0.4.0"
+statistics = "0.4.1-dev-1"
 letsPlot = "4.9.2"
 letsPlotImage = "4.5.1"
 mockk = "1.13.10"
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/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 51faba4e6..01581f47c 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
@@ -10,7 +10,7 @@ import org.jetbrains.kotlinx.dataframe.geo.io.readGeoJson
 import org.jetbrains.kotlinx.dataframe.geo.io.readShapefile
 import org.jetbrains.kotlinx.dataframe.geo.jts.scaleAroundCenter
 import org.jetbrains.kotlinx.dataframe.geo.jts.translate
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.categorical
 import org.jetbrains.kotlinx.kandy.dsl.continuous
 import org.jetbrains.kotlinx.kandy.letsplot.feature.layout
@@ -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,14 +105,14 @@ class Geo : SampleHelper("geo") {
             }
         }
             // SampleEnd
-            .saveSample(savePreview = true)
+            .savePlotSVGSample(savePreview = true)
     }
 
     @Test
     fun usa_adjusted() {
         // 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 name by column<String>()
         val geometry by column<Geometry>()
 
@@ -130,14 +130,14 @@ class Geo : SampleHelper("geo") {
             geoMap()
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
     fun usa_election_results_joined() {
         // 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 name by column<String>()
         val geometry by column<Geometry>()
 
@@ -152,7 +152,7 @@ class Geo : SampleHelper("geo") {
         }
 
         val usa2024electionResults =
-            DataFrame.readCSV("https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv")
+            DataFrame.readCsv("https://raw.githubusercontent.com/AndrewKis/datasets/refs/heads/main/USA_2024_elections_results_by_state.csv")
         val winner by column<String>()
 
         val usaStatesWithElectionResults = usaAdjusted.modify {
@@ -179,14 +179,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 {
@@ -200,18 +200,18 @@ class Geo : SampleHelper("geo") {
             layout.title = "US With CONUS Albers Projection"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
     fun usa_with_cities() {
         // 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 name by column<String>()
 
         val usaCities =
-            GeoDataFrame.readGeoJson("https://github.com/AndreiKingsley/datasets/raw/refs/heads/main/USA_cities.json")
+            GeoDataFrame.readGeoJson("https://github.com/AndrewKis/datasets/raw/refs/heads/main/USA_cities.json")
         val pop_min by column<Int>()
 
         usaStates.modify {
@@ -241,6 +241,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 e4c41eb4a..0fd32c702 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
@@ -16,7 +16,7 @@ import org.jetbrains.kotlinx.dataframe.geo.io.writeShapefile
 import org.jetbrains.kotlinx.dataframe.geo.jts.scaleAroundCenter
 import org.jetbrains.kotlinx.dataframe.geo.jts.toMultiPolygon
 import org.jetbrains.kotlinx.dataframe.geo.jts.translate
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.categorical
 import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.feature.CoordinatesTransformation
@@ -51,9 +51,9 @@ import kotlin.test.*
 class GeoGuide : SampleHelper("geoGuide", "guides") {
 
     private 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")
     private 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")
 
     private val name by column<String>()
     private val winner by column<String>()
@@ -95,7 +95,7 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
     }
 
     private val usa2024electionResults =
-        DataFrame.readCSV("https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/AndrewKis/datasets/refs/heads/main/USA_2024_elections_results_by_state.csv")
 
     private val usaStatesWithElectionResults = usaAdjusted.modify {
         innerJoin(usa2024electionResults) { name } as DataFrame<Nothing>
@@ -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,14 +441,14 @@ class GeoGuide : SampleHelper("geoGuide", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
     fun electionResultsLoadData() {
         // SampleStart
         val usa2024electionResults =
-            DataFrame.readCSV("https://gist.githubusercontent.com/AndreiKingsley/348687222aecc4f0eb39e3d81acd515b/raw/a9914352dbdfb426f9146dda633ee382d936b000/usa_2024_election_states.csv")
+            DataFrame.readCsv("https://raw.githubusercontent.com/AndrewKis/datasets/refs/heads/main/USA_2024_elections_results_by_state.csv")
 
         usa2024electionResults
         // SampleEnd
@@ -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 817ccf65e..bd54d516f 100644
--- a/kandy-lets-plot/build.gradle.kts
+++ b/kandy-lets-plot/build.gradle.kts
@@ -25,7 +25,7 @@ dependencies {
     testImplementation(libs.kotlin.test)
     testImplementation(libs.mockk)
     testImplementation(libs.kotlinx.statistics)
-    testImplementation(project(":samples-utils"))
+    testImplementation(project(":kandy-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 4474d2ea9..9b4def3d3 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
@@ -2,11 +2,9 @@ package org.jetbrains.kotlinx.kandy.letsplot.samples
 
 import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.*
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+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
@@ -220,7 +218,7 @@ class DensityPlot : SampleHelper("densityPlot") {
     @Test
     fun densityPlot_with_histogram() {
         // SampleStart
-        val df = DataFrame.readCSV(
+        val df = DataFrame.readCsv(
             fileOrUrl = "https://raw.githubusercontent.com/Kotlin/dataframe/master/examples/idea-examples/titanic/src/main/resources/titanic.csv",
             delimiter = ';', parserOptions = ParserOptions(locale = java.util.Locale.FRENCH)
         )
@@ -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..828138656 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
@@ -109,7 +109,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 48945588e..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
@@ -5,7 +5,7 @@ import org.jetbrains.kotlinx.dataframe.api.ParserOptions
 import org.jetbrains.kotlinx.dataframe.api.column
 import org.jetbrains.kotlinx.dataframe.api.describe
 import org.jetbrains.kotlinx.dataframe.api.head
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.continuous
 import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.layers.abLine
@@ -18,7 +18,7 @@ import kotlin.test.Test
 class AnscombesQuartet : SampleHelper("multiplot", "guides") {
 
     private val df =
-        DataFrame.readCSV(
+        DataFrame.readCsv(
             "https://gist.githubusercontent.com/ericbusboom/b2ac1d366c005cd2ed8c/raw/c92c66e43d144fa9c29dbd602d5af6988e8db533/anscombes.csv",
             parserOptions = ParserOptions(locale = Locale.ENGLISH)
         )
@@ -29,7 +29,7 @@ class AnscombesQuartet : SampleHelper("multiplot", "guides") {
     fun guideAnscombesQuartetReadData() {
         // SampleStart
         val df =
-            DataFrame.readCSV(
+            DataFrame.readCsv(
                 "https://gist.githubusercontent.com/ericbusboom/b2ac1d366c005cd2ed8c/raw/c92c66e43d144fa9c29dbd602d5af6988e8db533/anscombes.csv",
                 parserOptions = ParserOptions(locale = Locale.ENGLISH)
             )
@@ -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 a43ecfb16..fa84aec86 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
@@ -8,7 +8,7 @@ import org.jetbrains.kotlinx.dataframe.api.dataFrameOf
 import org.jetbrains.kotlinx.dataframe.api.groupBy
 import org.jetbrains.kotlinx.dataframe.api.head
 import org.jetbrains.kotlinx.dataframe.get
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.continuous
 import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.feature.Position
@@ -18,7 +18,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
@@ -305,7 +304,7 @@ class Boxplot : SampleHelper("stat", "guides") {
 
     // Grouped data
     private val mpgDF =
-        DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
     private val `class` = column<String>("class")
     private val hwy = column<Int>("hwy")
     private val drv = column<String>("drv")
@@ -318,7 +317,7 @@ class Boxplot : SampleHelper("stat", "guides") {
         // SampleStart
         // Use "mpg" dataset
         val mpgDF =
-            DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+            DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
         mpgDF.head()
         // SampleEnd
     }
@@ -364,7 +363,7 @@ class Boxplot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -382,7 +381,7 @@ class Boxplot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -392,7 +391,7 @@ class Boxplot : SampleHelper("stat", "guides") {
             boxplot(`class`, hwy)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -410,7 +409,7 @@ class Boxplot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -419,7 +418,7 @@ class Boxplot : SampleHelper("stat", "guides") {
         groupedDF.boxplot("class", "hwy")
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -441,7 +440,7 @@ class Boxplot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -453,6 +452,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 c213e148e..32ee0a894 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 904d91864..9b68b3336 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
@@ -5,7 +5,7 @@ import org.jetbrains.kotlinx.dataframe.api.column
 import org.jetbrains.kotlinx.dataframe.api.groupBy
 import org.jetbrains.kotlinx.dataframe.api.head
 import org.jetbrains.kotlinx.dataframe.get
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.categorical
 import org.jetbrains.kotlinx.kandy.dsl.continuous
 import org.jetbrains.kotlinx.kandy.dsl.plot
@@ -30,7 +30,7 @@ import kotlin.test.Test
 class CountPlot : SampleHelper("stat", "guides") {
 
     private val mpgDF =
-        DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
     private val `class` = column<String>("class")
     private val drv = column<String>("drv")
     private val hwy = column<Int>("hwy")
@@ -41,7 +41,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         // SampleStart
         // Use "mpg" dataset
         val mpgDF =
-            DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+            DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
         mpgDF.head(5)
         // SampleEnd
     }
@@ -78,7 +78,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -95,7 +95,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         }
         statCountAndBarsPlt
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -107,7 +107,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         }
         countPlt
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -128,7 +128,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         // SampleStart
         plotGrid(listOf(statCountAndBarsPlt, countPlt))
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -144,7 +144,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -163,7 +163,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             x.axis.name = "Car class"
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -172,7 +172,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         countPlot(listOf("A", "A", "A", "B", "B", "C", "B", "B"))
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -181,7 +181,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         df.countPlot("class")
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -195,7 +195,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         }
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -217,7 +217,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     // Grouped data
@@ -253,7 +253,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -269,7 +269,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -279,7 +279,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             countPlot("class")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -297,7 +297,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -306,7 +306,7 @@ class CountPlot : SampleHelper("stat", "guides") {
         groupedDF.countPlot("class")
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -321,7 +321,7 @@ class CountPlot : SampleHelper("stat", "guides") {
             fillColor("drv") { scale = categoricalColorBrewer(BrewerPalette.Qualitative.Dark2) }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -333,6 +333,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 a33c194d1..c04f538d0 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 f1983d23a..d012e602e 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 44a66cb84..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
@@ -4,7 +4,7 @@ import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.ParserOptions
 import org.jetbrains.kotlinx.dataframe.api.column
 import org.jetbrains.kotlinx.dataframe.api.head
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.invoke
 import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.feature.layout
@@ -19,7 +19,7 @@ import kotlin.test.Test
 
 class Facets : SampleHelper("multiplot", "guides") {
 
-    private val dataset = DataFrame.readCSV(
+    private val dataset = DataFrame.readCsv(
         "https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg2.csv",
         parserOptions = ParserOptions(Locale.ENGLISH)
     )
@@ -31,7 +31,7 @@ class Facets : SampleHelper("multiplot", "guides") {
     @Test
     fun guideFacetsReadDataFrame() {
         // SampleStart
-        val dataset = DataFrame.readCSV(
+        val dataset = DataFrame.readCsv(
             "https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg2.csv",
             parserOptions = ParserOptions(Locale.ENGLISH)
         )
@@ -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 7a799fd2f..c1baf4ea5 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
@@ -4,7 +4,7 @@ import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.column
 import org.jetbrains.kotlinx.dataframe.api.head
 import org.jetbrains.kotlinx.dataframe.get
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.continuous
 import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.feature.layout
@@ -13,7 +13,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
@@ -25,7 +24,7 @@ import kotlin.test.Test
 class Heatmap : SampleHelper("stat", "guides") {
 
     private val mpgDF =
-        DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
     private val `class` = column<String>("class")
     private val drv = column<String>("drv")
     private val hwy = column<Int>("hwy")
@@ -36,7 +35,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         // SampleStart
         // Use "mpg" dataset
         val mpgDF =
-            DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+            DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
         mpgDF.head(5)
         // SampleEnd
     }
@@ -77,7 +76,7 @@ class Heatmap : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -95,7 +94,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         }
         statCount2DAndTilePlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -107,7 +106,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         }
         heatmapLayerPlot
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -124,7 +123,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         // SampleStart
         plotGrid(listOf(statCount2DAndTilePlot, heatmapLayerPlot))
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -142,7 +141,7 @@ class Heatmap : SampleHelper("stat", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -152,7 +151,7 @@ class Heatmap : SampleHelper("stat", "guides") {
             heatmap(`class`, drv, hwy)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -164,7 +163,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         )
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -173,7 +172,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         df.heatmap("class", "drv")
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -189,7 +188,7 @@ class Heatmap : SampleHelper("stat", "guides") {
         }
             // SampleEnd
             .toPlot()
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -217,6 +216,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 bc7ca3788..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
@@ -2,7 +2,7 @@ package org.jetbrains.kotlinx.kandy.letsplot.samples.guides
 
 import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.column
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.feature.Position
 import org.jetbrains.kotlinx.kandy.letsplot.feature.position
@@ -13,7 +13,7 @@ import kotlin.test.Test
 class JitterPoints : SampleHelper("geoms", "guides") {
 
     private val mpgDf =
-        DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 
     private val drv = column<String>("drv")
     private val hwy = column<Int>("hwy")
@@ -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 24d985f38..ae1dabcf6 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
@@ -8,7 +8,7 @@ import org.jetbrains.kotlinx.dataframe.api.ParserOptions
 import org.jetbrains.kotlinx.dataframe.api.column
 import org.jetbrains.kotlinx.dataframe.api.filter
 import org.jetbrains.kotlinx.dataframe.api.head
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+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.layers.hLine
@@ -28,7 +28,7 @@ import kotlin.test.Test
 
 class LabelFormat : SampleHelper("layout", "guides") {
 
-    private val economics = DataFrame.readCSV(
+    private val economics = DataFrame.readCsv(
         "https://vincentarelbundock.github.io/Rdatasets/csv/ggplot2/economics.csv",
         parserOptions = ParserOptions(Locale.ENGLISH)
     ).filter { "date"<LocalDate>() >= LocalDate(2001, 1, 1) }
@@ -40,7 +40,7 @@ class LabelFormat : SampleHelper("layout", "guides") {
     fun guideLabelReadData() {
         // SampleStart
         // The US Unemployment Rates 2000-2016
-        val economics = DataFrame.readCSV(
+        val economics = DataFrame.readCsv(
             "https://vincentarelbundock.github.io/Rdatasets/csv/ggplot2/economics.csv",
             parserOptions = ParserOptions(Locale.ENGLISH)
         ).filter { "date"<LocalDate>() >= LocalDate(2001, 1, 1) }
@@ -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 fb8a47f6a..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
@@ -3,7 +3,7 @@ package org.jetbrains.kotlinx.kandy.letsplot.samples.guides
 import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.column
 import org.jetbrains.kotlinx.dataframe.api.head
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.continuous
 import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.feature.layout
@@ -21,7 +21,7 @@ import kotlin.test.Test
 class LegendAndAxis : SampleHelper("layout", "guides") {
 
     private val mpgDf =
-        DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
     private val displ = column<Double>("displ")
     private val hwy = column<Int>("hwy")
     private val manufacturer = column<String>("manufacturer")
@@ -32,7 +32,7 @@ class LegendAndAxis : SampleHelper("layout", "guides") {
     fun guideLegendAxisReadData() {
         // SampleStart
         val mpgDf =
-            DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+            DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
         mpgDf.head()
         // SampleEnd
     }
@@ -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 37559fee8..034126bb3 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
@@ -3,7 +3,7 @@ package org.jetbrains.kotlinx.kandy.letsplot.samples.guides
 import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.column
 import org.jetbrains.kotlinx.dataframe.api.median
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+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.layers.*
@@ -22,7 +22,7 @@ import kotlin.test.assertNotNull
 class Lines : SampleHelper("geoms", "guides") {
 
     private val mpgDf =
-        DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 
     private val cty = column<Int>("cty")
     private val hwy = column<Int>("hwy")
@@ -74,7 +74,7 @@ class Lines : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -106,7 +106,7 @@ class Lines : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -119,7 +119,7 @@ class Lines : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -132,7 +132,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>> {
@@ -196,6 +196,6 @@ class Lines : SampleHelper("geoms", "guides") {
             add(segments, 0, 300, 700, 300)
         }
             // 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 317b9c0bf..7859fdedd 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
@@ -74,7 +74,7 @@ class Pie : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -96,7 +96,7 @@ class Pie : SampleHelper("geoms", "guides") {
             }
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -140,7 +140,7 @@ class Pie : SampleHelper("geoms", "guides") {
             layout.style(Style.Void)
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -192,6 +192,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 dc05c609c..6e57d34c8 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, 200)
         }
             // 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 e00eab9b1..2f9d07b28 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
@@ -2,7 +2,7 @@ package org.jetbrains.kotlinx.kandy.letsplot.samples.guides
 
 import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.*
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.*
 import org.jetbrains.kotlinx.kandy.ir.scale.Scale
 import org.jetbrains.kotlinx.kandy.letsplot.feature.Position
@@ -68,7 +68,7 @@ class QuickStartGuide : SampleHelper("quickStartGuide", "guides") {
 
     // Auto Dataset
     private val mpgDF =
-        DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 
     private val manufacturer = column<String>("manufacturer")
     private val model = column<String>("model")
@@ -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, 200, 700, 300)
         }
             // 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 5579c0917..868ccff77 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 7e0ea5dd6..b4d1710a4 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
@@ -5,7 +5,7 @@ import org.jetbrains.kotlinx.dataframe.api.column
 import org.jetbrains.kotlinx.dataframe.api.count
 import org.jetbrains.kotlinx.dataframe.api.groupBy
 import org.jetbrains.kotlinx.dataframe.api.head
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.feature.*
 import org.jetbrains.kotlinx.kandy.letsplot.feature.layout
@@ -25,7 +25,7 @@ import kotlin.test.assertNotNull
 class Styles : SampleHelper("layout", "guides") {
 
     private val df =
-        DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 
     private val year = column<Int>("year")
     private val cty = column<Int>("cty")
@@ -102,7 +102,7 @@ class Styles : SampleHelper("layout", "guides") {
     fun guideStylesReadData() {
         // SampleStart
         val df =
-            DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+            DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
         df.head(3)
         // SampleEnd
     }
@@ -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 dd6a07436..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
@@ -3,7 +3,7 @@ package org.jetbrains.kotlinx.kandy.letsplot.samples.guides
 import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.column
 import org.jetbrains.kotlinx.dataframe.api.head
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+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.layers.points
@@ -18,7 +18,7 @@ import kotlin.test.Test
 class TitleSubtitleCaption : SampleHelper("layout", "guides") {
 
     private val mpgDf =
-        DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 
     private val displ = column<Double>("displ")
     private val drv = column<String>("drv")
@@ -29,7 +29,7 @@ class TitleSubtitleCaption : SampleHelper("layout", "guides") {
     fun guideTitleReadData() {
         // SampleStart
         val mpgDf =
-            DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+            DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
         mpgDf.head()
         // SampleEnd
     }
@@ -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/guides/tooltips.kt b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/tooltips.kt
index 33dcfacc1..697914911 100644
--- a/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/tooltips.kt
+++ b/kandy-lets-plot/src/test/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/guides/tooltips.kt
@@ -2,7 +2,7 @@ package org.jetbrains.kotlinx.kandy.letsplot.samples.guides
 
 import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.*
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+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.layers.points
@@ -24,7 +24,7 @@ import kotlin.test.assertNotNull
 class Tooltips : SampleHelper("layout", "guides") {
 
     private val mpgDf =
-        DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+        DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 
     private val manufacturer = column<String>("manufacturer")
     private val model = column<String>("model")
@@ -40,7 +40,7 @@ class Tooltips : SampleHelper("layout", "guides") {
     fun guideTooltipReadAutoDf() {
         // SampleStart
         val mpgDf =
-            DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+            DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
         mpgDf.head()
         // SampleEnd
     }
@@ -141,7 +141,7 @@ class Tooltips : SampleHelper("layout", "guides") {
         // SampleEnd
     }
 
-    private val irisDf = DataFrame.readCSV(
+    private val irisDf = DataFrame.readCsv(
         "https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/iris.csv",
         parserOptions = ParserOptions(Locale.ENGLISH)
     )
@@ -152,7 +152,7 @@ class Tooltips : SampleHelper("layout", "guides") {
     @Test
     fun guideTooltipReadIrisDf() {
         // SampleStart
-        val irisDf = DataFrame.readCSV(
+        val irisDf = DataFrame.readCsv(
             "https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/iris.csv",
             parserOptions = ParserOptions(Locale.ENGLISH)
         )
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 eb7ddea6d..6cee93b3f 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
@@ -2,7 +2,7 @@ package org.jetbrains.kotlinx.kandy.letsplot.samples
 
 import org.jetbrains.kotlinx.dataframe.DataFrame
 import org.jetbrains.kotlinx.dataframe.api.*
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+import org.jetbrains.kotlinx.dataframe.io.readCsv
 import org.jetbrains.kotlinx.kandy.dsl.continuous
 import org.jetbrains.kotlinx.kandy.dsl.plot
 import org.jetbrains.kotlinx.kandy.letsplot.y
@@ -55,7 +55,7 @@ class Heatmap : SampleHelper("heatmap") {
             heatmap("days", "drinks")
         }
             // SampleEnd
-            .saveSample()
+            .savePlotSVGSample()
     }
 
     @Test
@@ -103,7 +103,7 @@ class Heatmap : SampleHelper("heatmap") {
     @Test
     fun heatmap_settings() {
         // SampleStart
-        val df = DataFrame.readCSV(
+        val df = DataFrame.readCsv(
             fileOrUrl = "https://raw.githubusercontent.com/Kotlin/dataframe/master/examples/idea-examples/titanic/src/main/resources/titanic.csv",
             delimiter = ';', parserOptions = ParserOptions(locale = java.util.Locale.FRENCH)
         )
@@ -122,7 +122,7 @@ class Heatmap : SampleHelper("heatmap") {
             y.axis.breaks(df["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 47528ad15..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
@@ -1,7 +1,7 @@
 package org.jetbrains.kotlinx.kandy.letsplot.samples
 
 import org.jetbrains.kotlinx.dataframe.DataFrame
-import org.jetbrains.kotlinx.dataframe.io.readCSV
+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.layers.bars
@@ -27,7 +27,7 @@ class Layout : SampleHelper("layout") {
             }
         }
             // SampleEnd
-            .saveSample(true)
+            .savePlotSVGSample(true)
     }
 
     @Test
@@ -46,14 +46,14 @@ class Layout : SampleHelper("layout") {
             }
         }
             // SampleEnd
-            .saveSample(true)
+            .savePlotSVGSample(true)
     }
 
     @Test
     fun axis_and_legend_configuration() {
         // SampleStart
         val df =
-            DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
+            DataFrame.readCsv("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
 
         df.plot {
             points {
@@ -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 e6bc34f88..dd161722b 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..e3120d221
--- /dev/null
+++ b/util/kandy-samples-utils/README.md
@@ -0,0 +1,51 @@
+# 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, 
+unzip and run in command in folder:
+    ```bash
+    http-server
+    ```
+   or
+   ```bash
+   python -m http.server  
+   ```
diff --git a/util/samples-utils/build.gradle.kts b/util/kandy-samples-utils/build.gradle.kts
similarity index 100%
rename from util/samples-utils/build.gradle.kts
rename to util/kandy-samples-utils/build.gradle.kts
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 72%
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..599080aae 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,10 @@
 @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.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 +23,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 +77,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 +96,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 +118,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 +127,25 @@ public abstract class SampleHelper(sampleName: String, folder: String = "samples
         saveAsSVG("${name}_dark")
     }
 
+    /**
+     * 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 = 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 +208,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,12 +232,14 @@ 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
     }
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..8048a77bd
--- /dev/null
+++ b/util/kandy-samples-utils/src/main/kotlin/org/jetbrains/kotlinx/kandy/letsplot/samples/writersideParameters.kt
@@ -0,0 +1,79 @@
+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;
+
+    const thead = table.querySelector('thead');
+    const tbody = table.querySelector('tbody');
+    if (!thead || !tbody || tbody.children.length === 0) return;
+
+    let height = thead.offsetHeight;
+    const rows = tbody.querySelectorAll('tr');
+    for (let i = 0; i < Math.min(rows.length, 5); i++) {
+        height += rows[i].offsetHeight;
+    }
+
+    const margin = parseFloat(getComputedStyle(table).marginTop) +
+                   parseFloat(getComputedStyle(table).marginBottom);
+
+    const totalHeight = Math.ceil(height + margin + 10);
+
+    window.parent.postMessage({ type: 'iframeHeight', height: totalHeight }, '*');
+}
+
+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(sendHeight);
+observer.observe(document.querySelector('.dataframe'), {
+    childList: true,
+    subtree: true,
+    characterData: true
+});
+
+    """.trimIndent()
+)
+
+internal val WritersideFooter: (DataFrame<*>) -> String = { "" }
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()