From aa09cc02a5e499781affd292191c11c866216690 Mon Sep 17 00:00:00 2001
From: BENcorry <1417224785@qq.com>
Date: Mon, 18 Dec 2023 11:50:54 +0800
Subject: [PATCH] fix(axis): custom axis tags disappear when the page is zoomed
 (#5940)

Co-authored-by: ben.wen <ben.wen@narwal.com>
---
 .../animation/stocks-keyframe/interval2-0.svg |  180 +-
 .../animation/stocks-keyframe/interval2-1.svg |  264 +--
 .../api/chart-emit-scrollbar-filter/step0.svg |  890 ++------
 .../api/chart-emit-scrollbar-filter/step1.svg |  660 +-----
 .../api/chart-emit-slider-filter/step0.svg    | 1848 ++---------------
 .../api/chart-emit-slider-filter/step1.svg    | 1670 ++-------------
 .../chart-render-update-attributes/step0.svg  |  316 +--
 .../chart-render-update-attributes/step1.svg  |  316 +--
 .../snapshots/api/chartChangeDataLegend.svg   |  594 +-----
 .../snapshots/api/markChangeData.svg          | 1251 +++--------
 src/runtime/plot.ts                           |    2 +-
 11 files changed, 925 insertions(+), 7066 deletions(-)

diff --git a/__tests__/integration/snapshots/animation/stocks-keyframe/interval2-0.svg b/__tests__/integration/snapshots/animation/stocks-keyframe/interval2-0.svg
index b7192a0cb4..926bac15a1 100644
--- a/__tests__/integration/snapshots/animation/stocks-keyframe/interval2-0.svg
+++ b/__tests__/integration/snapshots/animation/stocks-keyframe/interval2-0.svg
@@ -944,6 +944,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
@@ -971,6 +972,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       100
                     </text>
@@ -998,6 +1000,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       200
                     </text>
@@ -1297,7 +1300,7 @@
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,42.770969)">
+                  <g transform="matrix(1,0,0,1,0,47.789204)">
                     <path
                       id="g-svg-157"
                       fill="none"
@@ -1309,7 +1312,7 @@
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,8.003477)">
+                  <g transform="matrix(1,0,0,1,0,18.039949)">
                     <path
                       id="g-svg-158"
                       fill="none"
@@ -1388,7 +1391,7 @@
                 <g
                   id="g-svg-164"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,42.770969)"
+                  transform="matrix(1,0,0,1,0,47.789204)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -1409,7 +1412,7 @@
                 <g
                   id="g-svg-165"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,8.003477)"
+                  transform="matrix(1,0,0,1,0,18.039949)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -1456,6 +1459,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
@@ -1464,12 +1468,12 @@
                 <g
                   id="g-svg-171"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,42.770969)"
+                  transform="matrix(1,0,0,1,-8,47.789204)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-174"
+                      id="g-svg-594"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1484,26 +1488,6 @@
                       class="axis-label-item"
                       opacity="0.45"
                       visibility="visible"
-                    >
-                      100
-                    </text>
-                  </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-594"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.00011327796378335642"
                     >
                       50
                     </text>
@@ -1512,12 +1496,12 @@
                 <g
                   id="g-svg-172"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,8.003477)"
+                  transform="matrix(1,0,0,1,-8,18.039949)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-175"
+                      id="g-svg-595"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1532,26 +1516,6 @@
                       class="axis-label-item"
                       opacity="0.45"
                       visibility="visible"
-                    >
-                      200
-                    </text>
-                  </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-595"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.00011327796378335642"
                     >
                       100
                     </text>
@@ -1851,7 +1815,7 @@
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,42.770969)">
+                  <g transform="matrix(1,0,0,1,0,49.012798)">
                     <path
                       id="g-svg-210"
                       fill="none"
@@ -1863,7 +1827,7 @@
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,8.003477)">
+                  <g transform="matrix(1,0,0,1,0,20.487133)">
                     <path
                       id="g-svg-211"
                       fill="none"
@@ -1942,7 +1906,7 @@
                 <g
                   id="g-svg-217"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,42.770969)"
+                  transform="matrix(1,0,0,1,0,49.012798)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -1963,7 +1927,7 @@
                 <g
                   id="g-svg-218"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,8.003477)"
+                  transform="matrix(1,0,0,1,0,20.487133)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2010,6 +1974,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
@@ -2018,12 +1983,12 @@
                 <g
                   id="g-svg-224"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,42.770969)"
+                  transform="matrix(1,0,0,1,-8,49.012798)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-227"
+                      id="g-svg-603"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2038,26 +2003,6 @@
                       class="axis-label-item"
                       opacity="0.45"
                       visibility="visible"
-                    >
-                      100
-                    </text>
-                  </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-603"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.00011327796378335642"
                     >
                       50
                     </text>
@@ -2066,12 +2011,12 @@
                 <g
                   id="g-svg-225"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,8.003477)"
+                  transform="matrix(1,0,0,1,-8,20.487133)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-228"
+                      id="g-svg-604"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2086,26 +2031,6 @@
                       class="axis-label-item"
                       opacity="0.45"
                       visibility="visible"
-                    >
-                      200
-                    </text>
-                  </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-604"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.00011327796378335642"
                     >
                       100
                     </text>
@@ -2504,6 +2429,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2000
                     </text>
@@ -2532,6 +2458,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2002
                     </text>
@@ -2560,6 +2487,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2004
                     </text>
@@ -2588,6 +2516,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2006
                     </text>
@@ -2616,6 +2545,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2008
                     </text>
@@ -2644,6 +2574,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2010
                     </text>
@@ -2701,7 +2632,7 @@
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,42.770969)">
+                  <g transform="matrix(1,0,0,1,0,41.657639)">
                     <path
                       id="g-svg-287"
                       fill="none"
@@ -2713,7 +2644,7 @@
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,8.003477)">
+                  <g transform="matrix(1,0,0,1,0,5.776813)">
                     <path
                       id="g-svg-288"
                       fill="none"
@@ -2792,7 +2723,7 @@
                 <g
                   id="g-svg-294"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,42.770969)"
+                  transform="matrix(1,0,0,1,0,41.657639)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2813,7 +2744,7 @@
                 <g
                   id="g-svg-295"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,8.003477)"
+                  transform="matrix(1,0,0,1,0,5.776813)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2860,6 +2791,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
@@ -2868,12 +2800,12 @@
                 <g
                   id="g-svg-301"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,42.770969)"
+                  transform="matrix(1,0,0,1,-8,41.657639)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-304"
+                      id="g-svg-624"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2888,26 +2820,6 @@
                       class="axis-label-item"
                       opacity="0.45"
                       visibility="visible"
-                    >
-                      100
-                    </text>
-                  </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-624"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.00011327796378335642"
                     >
                       20
                     </text>
@@ -2916,12 +2828,12 @@
                 <g
                   id="g-svg-302"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,8.003477)"
+                  transform="matrix(1,0,0,1,-8,5.776813)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-305"
+                      id="g-svg-625"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2936,26 +2848,6 @@
                       class="axis-label-item"
                       opacity="0.45"
                       visibility="visible"
-                    >
-                      200
-                    </text>
-                  </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-625"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.00011327796378335642"
                     >
                       40
                     </text>
diff --git a/__tests__/integration/snapshots/animation/stocks-keyframe/interval2-1.svg b/__tests__/integration/snapshots/animation/stocks-keyframe/interval2-1.svg
index 037d2bf4c2..6bd41fee55 100644
--- a/__tests__/integration/snapshots/animation/stocks-keyframe/interval2-1.svg
+++ b/__tests__/integration/snapshots/animation/stocks-keyframe/interval2-1.svg
@@ -621,7 +621,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -633,7 +633,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -645,7 +645,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -657,7 +657,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -669,7 +669,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -681,7 +681,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -781,7 +781,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -793,7 +793,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -805,7 +805,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -944,6 +944,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
@@ -971,6 +972,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       100
                     </text>
@@ -998,6 +1000,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       200
                     </text>
@@ -1133,7 +1136,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1145,7 +1148,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1157,7 +1160,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1169,7 +1172,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1181,7 +1184,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1193,7 +1196,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1293,11 +1296,11 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,45.280087)">
+                  <g transform="matrix(1,0,0,1,0,47.789204)">
                     <path
                       id="g-svg-157"
                       fill="none"
@@ -1305,11 +1308,11 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,13.021713)">
+                  <g transform="matrix(1,0,0,1,0,18.039949)">
                     <path
                       id="g-svg-158"
                       fill="none"
@@ -1317,7 +1320,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1388,7 +1391,7 @@
                 <g
                   id="g-svg-164"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,45.280087)"
+                  transform="matrix(1,0,0,1,0,47.789204)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -1409,7 +1412,7 @@
                 <g
                   id="g-svg-165"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,13.021713)"
+                  transform="matrix(1,0,0,1,0,18.039949)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -1456,6 +1459,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
@@ -1464,30 +1468,9 @@
                 <g
                   id="g-svg-171"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,45.280087)"
+                  transform="matrix(1,0,0,1,-8,47.789204)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-174"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.06590097423302682"
-                      visibility="visible"
-                    >
-                      100
-                    </text>
-                  </g>
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
                       id="g-svg-594"
@@ -1503,7 +1486,8 @@
                       stroke-width="1"
                       text-anchor="end"
                       class="axis-label-item"
-                      opacity="0.062159841426359184"
+                      opacity="0.45"
+                      visibility="visible"
                     >
                       50
                     </text>
@@ -1512,30 +1496,9 @@
                 <g
                   id="g-svg-172"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,13.021713)"
+                  transform="matrix(1,0,0,1,-8,18.039949)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-175"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.06590097423302682"
-                      visibility="visible"
-                    >
-                      200
-                    </text>
-                  </g>
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
                       id="g-svg-595"
@@ -1551,7 +1514,8 @@
                       stroke-width="1"
                       text-anchor="end"
                       class="axis-label-item"
-                      opacity="0.062159841426359184"
+                      opacity="0.45"
+                      visibility="visible"
                     >
                       100
                     </text>
@@ -1687,7 +1651,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846158 C 0 38.76923076923079,0 0,0 0"
+                      d="M 0,77.53846153846158 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1699,7 +1663,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846158 C 0 38.76923076923079,0 0,0 0"
+                      d="M 0,77.53846153846158 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1711,7 +1675,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846158 C 0 38.76923076923079,0 0,0 0"
+                      d="M 0,77.53846153846158 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1723,7 +1687,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846158 C 0 38.76923076923079,0 0,0 0"
+                      d="M 0,77.53846153846158 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1735,7 +1699,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846158 C 0 38.76923076923079,0 0,0 0"
+                      d="M 0,77.53846153846158 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1747,7 +1711,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846158 C 0 38.76923076923079,0 0,0 0"
+                      d="M 0,77.53846153846158 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1847,11 +1811,11 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,45.891884)">
+                  <g transform="matrix(1,0,0,1,0,49.012798)">
                     <path
                       id="g-svg-210"
                       fill="none"
@@ -1859,11 +1823,11 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,14.245304)">
+                  <g transform="matrix(1,0,0,1,0,20.487133)">
                     <path
                       id="g-svg-211"
                       fill="none"
@@ -1871,7 +1835,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -1942,7 +1906,7 @@
                 <g
                   id="g-svg-217"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,45.891884)"
+                  transform="matrix(1,0,0,1,0,49.012798)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -1963,7 +1927,7 @@
                 <g
                   id="g-svg-218"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,14.245304)"
+                  transform="matrix(1,0,0,1,0,20.487133)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2010,6 +1974,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
@@ -2018,30 +1983,9 @@
                 <g
                   id="g-svg-224"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,45.891884)"
+                  transform="matrix(1,0,0,1,-8,49.012798)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-227"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.06590097423302682"
-                      visibility="visible"
-                    >
-                      100
-                    </text>
-                  </g>
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
                       id="g-svg-603"
@@ -2057,7 +2001,8 @@
                       stroke-width="1"
                       text-anchor="end"
                       class="axis-label-item"
-                      opacity="0.062159841426359184"
+                      opacity="0.45"
+                      visibility="visible"
                     >
                       50
                     </text>
@@ -2066,30 +2011,9 @@
                 <g
                   id="g-svg-225"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,14.245304)"
+                  transform="matrix(1,0,0,1,-8,20.487133)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-228"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.06590097423302682"
-                      visibility="visible"
-                    >
-                      200
-                    </text>
-                  </g>
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
                       id="g-svg-604"
@@ -2105,7 +2029,8 @@
                       stroke-width="1"
                       text-anchor="end"
                       class="axis-label-item"
-                      opacity="0.062159841426359184"
+                      opacity="0.45"
+                      visibility="visible"
                     >
                       100
                     </text>
@@ -2241,7 +2166,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -2253,7 +2178,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -2265,7 +2190,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -2277,7 +2202,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -2289,7 +2214,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -2301,7 +2226,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,77.53846153846155 C 0 38.769230769230774,0 0,0 0"
+                      d="M 0,77.53846153846155 L 0,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -2504,6 +2429,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2000
                     </text>
@@ -2532,6 +2458,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2002
                     </text>
@@ -2560,6 +2487,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2004
                     </text>
@@ -2588,6 +2516,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2006
                     </text>
@@ -2616,6 +2545,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2008
                     </text>
@@ -2644,6 +2574,7 @@
                       class="axis-label-item"
                       dy="11.5px"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       2010
                     </text>
@@ -2697,11 +2628,11 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,42.214302)">
+                  <g transform="matrix(1,0,0,1,0,41.657639)">
                     <path
                       id="g-svg-287"
                       fill="none"
@@ -2709,11 +2640,11 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,6.890145)">
+                  <g transform="matrix(1,0,0,1,0,5.776813)">
                     <path
                       id="g-svg-288"
                       fill="none"
@@ -2721,7 +2652,7 @@
                       stroke="rgba(29,33,41,1)"
                       stroke-width="0.5"
                       stroke-dasharray="3,4"
-                      d="M 0,0 C 339 0,678 0,678 0"
+                      d="M 0,0 L 678,0"
                       stroke-opacity="0.1"
                     />
                   </g>
@@ -2792,7 +2723,7 @@
                 <g
                   id="g-svg-294"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,42.214302)"
+                  transform="matrix(1,0,0,1,0,41.657639)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2813,7 +2744,7 @@
                 <g
                   id="g-svg-295"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,6.890145)"
+                  transform="matrix(1,0,0,1,0,5.776813)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2860,6 +2791,7 @@
                       text-anchor="end"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
@@ -2868,30 +2800,9 @@
                 <g
                   id="g-svg-301"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,42.214302)"
+                  transform="matrix(1,0,0,1,-8,41.657639)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-304"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.06590097423302682"
-                      visibility="visible"
-                    >
-                      100
-                    </text>
-                  </g>
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
                       id="g-svg-624"
@@ -2907,7 +2818,8 @@
                       stroke-width="1"
                       text-anchor="end"
                       class="axis-label-item"
-                      opacity="0.062159841426359184"
+                      opacity="0.45"
+                      visibility="visible"
                     >
                       20
                     </text>
@@ -2916,30 +2828,9 @@
                 <g
                   id="g-svg-302"
                   fill="none"
-                  transform="matrix(1,0,0,1,-8,6.890145)"
+                  transform="matrix(1,0,0,1,-8,5.776813)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-305"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.06590097423302682"
-                      visibility="visible"
-                    >
-                      200
-                    </text>
-                  </g>
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
                       id="g-svg-625"
@@ -2955,7 +2846,8 @@
                       stroke-width="1"
                       text-anchor="end"
                       class="axis-label-item"
-                      opacity="0.062159841426359184"
+                      opacity="0.45"
+                      visibility="visible"
                     >
                       40
                     </text>
diff --git a/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg b/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg
index 180bfdc683..9813b70042 100644
--- a/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg
+++ b/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg
@@ -7,7 +7,7 @@
 >
   <defs>
     <path
-      id="g-svg-198"
+      id="g-svg-148"
       fill="none"
       d="M 0,0 l 282.71999970563456,0 l 0,350 l-282.71999970563456 0 z"
       width="282.71999970563456"
@@ -15,12 +15,12 @@
     />
     <clipPath
       transform="matrix(1,0,0,1,-101.279999,-16)"
-      id="clip-path-198-107"
+      id="clip-path-148-107"
     >
-      <use href="#g-svg-198" transform="matrix(1,0,0,1,101.279999,16)" />
+      <use href="#g-svg-148" transform="matrix(1,0,0,1,101.279999,16)" />
     </clipPath>
     <path
-      id="g-svg-228"
+      id="g-svg-178"
       fill="none"
       d="M 0,0 l 282.71999970563456,0 l 0,350 l-282.71999970563456 0 z"
       width="282.71999970563456"
@@ -28,9 +28,9 @@
     />
     <clipPath
       transform="matrix(1,0,0,1,-101.279999,-16)"
-      id="clip-path-228-107"
+      id="clip-path-178-107"
     >
-      <use href="#g-svg-228" transform="matrix(1,0,0,1,101.279999,16)" />
+      <use href="#g-svg-178" transform="matrix(1,0,0,1,101.279999,16)" />
     </clipPath>
   </defs>
   <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
@@ -348,7 +348,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-205"
+                      id="g-svg-155"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -369,7 +369,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-206"
+                      id="g-svg-156"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -390,7 +390,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-207"
+                      id="g-svg-157"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -411,7 +411,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-208"
+                      id="g-svg-158"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -432,7 +432,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-209"
+                      id="g-svg-159"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -460,7 +460,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-210"
+                      id="g-svg-160"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -488,7 +488,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-211"
+                      id="g-svg-161"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -516,7 +516,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-212"
+                      id="g-svg-162"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -544,7 +544,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-213"
+                      id="g-svg-163"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -572,7 +572,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-214"
+                      id="g-svg-164"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -622,300 +622,6 @@
                 </text>
               </g>
             </g>
-            <g
-              id="g-svg-125"
-              fill="none"
-              class="offscreen"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-126"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,101.279999,366)">
-                  <line
-                    id="g-svg-127"
-                    fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="282.71999970563456"
-                    y2="0"
-                    visibility="hidden"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-128"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-129"
-                  fill="none"
-                  transform="matrix(1,0,0,1,131.769409,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-134"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-130"
-                  fill="none"
-                  transform="matrix(1,0,0,1,187.204712,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-135"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-131"
-                  fill="none"
-                  transform="matrix(1,0,0,1,242.639999,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-136"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-132"
-                  fill="none"
-                  transform="matrix(1,0,0,1,298.075287,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-137"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-133"
-                  fill="none"
-                  transform="matrix(1,0,0,1,353.510590,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-138"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-139"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-140"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,131.769409,374)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-145"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-01
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-141"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,187.204712,374)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-146"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-02
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-142"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,242.639999,374)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-147"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-03
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-143"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,298.075287,374)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-148"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-04
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-144"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,353.510590,374)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-149"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-05
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
           </g>
         </g>
         <g
@@ -935,424 +641,108 @@
               fill="none"
               transform="matrix(1,0,0,1,0,0)"
               class="axis-grid-group"
-            >
-              <g
-                id="g-svg-71"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-72"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,101.279999,366)">
-                    <path
-                      id="g-svg-74"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 282.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,101.279999,288.222229)">
-                    <path
-                      id="g-svg-75"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 282.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,101.279999,210.444443)">
-                    <path
-                      id="g-svg-76"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 282.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,101.279999,132.666672)">
-                    <path
-                      id="g-svg-77"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 282.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,101.279999,54.888889)">
-                    <path
-                      id="g-svg-78"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 282.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-73"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
-              </g>
-            </g>
-            <g
-              id="g-svg-79"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-80"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,101.279999,16)">
-                  <line
-                    id="g-svg-81"
-                    fill="none"
-                    x1="0"
-                    y1="350"
-                    x2="0"
-                    y2="0"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-82"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-83"
-                  fill="none"
-                  transform="matrix(1,0,0,1,101.279999,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-217"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-84"
-                  fill="none"
-                  transform="matrix(1,0,0,1,101.279999,288.222229)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-218"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-85"
-                  fill="none"
-                  transform="matrix(1,0,0,1,101.279999,210.444443)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-219"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-86"
-                  fill="none"
-                  transform="matrix(1,0,0,1,101.279999,132.666672)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-220"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-87"
-                  fill="none"
-                  transform="matrix(1,0,0,1,101.279999,54.888889)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-221"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-93"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-94"
-                  fill="none"
-                  transform="matrix(1,0,0,1,93.279999,366)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-222"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      0
-                    </text>
-                  </g>
-                </g>
+            >
+              <g
+                id="g-svg-71"
+                fill="none"
+                transform="matrix(1,0,0,1,0,0)"
+                class="axis-grid"
+              >
                 <g
-                  id="g-svg-95"
+                  id="g-svg-72"
                   fill="none"
-                  transform="matrix(1,0,0,1,93.279999,288.222229)"
-                  class="axis-label"
+                  transform="matrix(1,0,0,1,0,0)"
+                  class="grid-line-group"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-223"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      100
-                    </text>
+                  <g transform="matrix(1,0,0,1,101.279999,366)">
+                    <path
+                      id="g-svg-74"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 282.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
                   </g>
-                </g>
-                <g
-                  id="g-svg-96"
-                  fill="none"
-                  transform="matrix(1,0,0,1,93.279999,210.444443)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-224"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      200
-                    </text>
+                  <g transform="matrix(1,0,0,1,101.279999,288.222229)">
+                    <path
+                      id="g-svg-75"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 282.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
                   </g>
-                </g>
-                <g
-                  id="g-svg-97"
-                  fill="none"
-                  transform="matrix(1,0,0,1,93.279999,132.666672)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-225"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      300
-                    </text>
+                  <g transform="matrix(1,0,0,1,101.279999,210.444443)">
+                    <path
+                      id="g-svg-76"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 282.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,101.279999,132.666672)">
+                    <path
+                      id="g-svg-77"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 282.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,101.279999,54.888889)">
+                    <path
+                      id="g-svg-78"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 282.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
                   </g>
                 </g>
                 <g
-                  id="g-svg-98"
+                  id="g-svg-73"
                   fill="none"
-                  transform="matrix(1,0,0,1,93.279999,54.888889)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-226"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      400
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
-            <g
-              id="g-svg-104"
-              fill="none"
-              transform="matrix(1,0,0,1,35,196.750000)"
-              class="axis-title-group"
-            >
-              <g transform="matrix(0,-1,1,0,11.500000,0)">
-                <text
-                  id="g-svg-105"
-                  fill="rgba(29,33,41,1)"
-                  dominant-baseline="central"
-                  paint-order="stroke"
-                  dx="0.5"
-                  font-family="sans-serif"
-                  font-size="12"
-                  font-style="normal"
-                  font-variant="normal"
-                  font-weight="normal"
-                  stroke-width="1"
-                  text-anchor="middle"
-                  class="axis-title"
-                  opacity="0.9"
-                >
-                  value
-                </text>
+                  transform="matrix(1,0,0,1,0,0)"
+                  class="grid-region-group"
+                />
               </g>
             </g>
             <g
-              id="g-svg-162"
+              id="g-svg-79"
               fill="none"
-              class="offscreen"
               transform="matrix(1,0,0,1,0,0)"
+              class="axis-main-group"
             >
               <g
-                id="g-svg-163"
+                id="g-svg-80"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-line-group"
               >
                 <g transform="matrix(1,0,0,1,101.279999,16)">
                   <line
-                    id="g-svg-164"
+                    id="g-svg-81"
                     fill="none"
                     x1="0"
                     y1="350"
                     x2="0"
                     y2="0"
-                    visibility="hidden"
                     class="axis-line axis-line"
                     stroke-width="0.5"
                     stroke="rgba(29,33,41,1)"
@@ -1362,26 +752,25 @@
                 </g>
               </g>
               <g
-                id="g-svg-165"
+                id="g-svg-82"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-tick-group"
               >
                 <g
-                  id="g-svg-166"
+                  id="g-svg-83"
                   fill="none"
                   transform="matrix(1,0,0,1,101.279999,366)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-171"
+                      id="g-svg-167"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1390,20 +779,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-167"
+                  id="g-svg-84"
                   fill="none"
                   transform="matrix(1,0,0,1,101.279999,288.222229)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-172"
+                      id="g-svg-168"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1412,20 +800,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-168"
+                  id="g-svg-85"
                   fill="none"
                   transform="matrix(1,0,0,1,101.279999,210.444443)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-173"
+                      id="g-svg-169"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1434,20 +821,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-169"
+                  id="g-svg-86"
                   fill="none"
                   transform="matrix(1,0,0,1,101.279999,132.666672)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-174"
+                      id="g-svg-170"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1456,20 +842,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-170"
+                  id="g-svg-87"
                   fill="none"
                   transform="matrix(1,0,0,1,101.279999,54.888889)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-175"
+                      id="g-svg-171"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1479,20 +864,20 @@
                 </g>
               </g>
               <g
-                id="g-svg-176"
+                id="g-svg-93"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-label-group"
               >
                 <g
-                  id="g-svg-177"
+                  id="g-svg-94"
                   fill="none"
                   transform="matrix(1,0,0,1,93.279999,366)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-182"
+                      id="g-svg-172"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1504,23 +889,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-178"
+                  id="g-svg-95"
                   fill="none"
                   transform="matrix(1,0,0,1,93.279999,288.222229)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-183"
+                      id="g-svg-173"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1532,23 +917,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       100
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-179"
+                  id="g-svg-96"
                   fill="none"
                   transform="matrix(1,0,0,1,93.279999,210.444443)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-184"
+                      id="g-svg-174"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1560,23 +945,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       200
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-180"
+                  id="g-svg-97"
                   fill="none"
                   transform="matrix(1,0,0,1,93.279999,132.666672)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-185"
+                      id="g-svg-175"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1588,23 +973,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       300
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-181"
+                  id="g-svg-98"
                   fill="none"
                   transform="matrix(1,0,0,1,93.279999,54.888889)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-186"
+                      id="g-svg-176"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1616,9 +1001,9 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       400
                     </text>
@@ -1626,11 +1011,38 @@
                 </g>
               </g>
             </g>
+            <g
+              id="g-svg-104"
+              fill="none"
+              transform="matrix(1,0,0,1,35,196.750000)"
+              class="axis-title-group"
+            >
+              <g transform="matrix(0,-1,1,0,11.500000,0)">
+                <text
+                  id="g-svg-105"
+                  fill="rgba(29,33,41,1)"
+                  dominant-baseline="central"
+                  paint-order="stroke"
+                  dx="0.5"
+                  font-family="sans-serif"
+                  font-size="12"
+                  font-style="normal"
+                  font-variant="normal"
+                  font-weight="normal"
+                  stroke-width="1"
+                  text-anchor="middle"
+                  class="axis-title"
+                  opacity="0.9"
+                >
+                  value
+                </text>
+              </g>
+            </g>
           </g>
         </g>
         <g
           transform="matrix(1,0,0,1,101.279999,16)"
-          clip-path="url(#clip-path-228-107)"
+          clip-path="url(#clip-path-178-107)"
         >
           <path
             id="g-svg-107"
@@ -1648,7 +1060,7 @@
           >
             <g transform="matrix(1,0,0,1,5.543530,-38.888889)">
               <path
-                id="g-svg-201"
+                id="g-svg-151"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 49.89176465393551,0 l 0,388.8888888888889 l-49.89176465393551 0 z"
                 width="49.89176465393551"
@@ -1661,7 +1073,7 @@
             </g>
             <g transform="matrix(1,0,0,1,60.978825,-116.666664)">
               <path
-                id="g-svg-202"
+                id="g-svg-152"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 49.89176465393551,0 l 0,466.66666666666663 l-49.89176465393551 0 z"
                 width="49.89176465393551"
@@ -1674,7 +1086,7 @@
             </g>
             <g transform="matrix(1,0,0,1,116.414116,116.666664)">
               <path
-                id="g-svg-203"
+                id="g-svg-153"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 49.891764653935496,0 l 0,233.33333333333331 l-49.891764653935496 0 z"
                 width="49.891764653935496"
@@ -1687,7 +1099,7 @@
             </g>
             <g transform="matrix(1,0,0,1,171.849411,-116.666664)">
               <path
-                id="g-svg-229"
+                id="g-svg-179"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 49.891764653935496,0 l 0,466.66666666666663 l-49.891764653935496 0 z"
                 width="49.891764653935496"
@@ -1700,7 +1112,7 @@
             </g>
             <g transform="matrix(1,0,0,1,227.284698,116.666664)">
               <path
-                id="g-svg-230"
+                id="g-svg-180"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 49.89176465393547,0 l 0,233.33333333333331 l-49.89176465393547 0 z"
                 width="49.89176465393547"
diff --git a/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step1.svg b/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step1.svg
index 68a9b5da37..93d047cd3a 100644
--- a/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step1.svg
+++ b/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step1.svg
@@ -7,7 +7,7 @@
 >
   <defs>
     <path
-      id="g-svg-198"
+      id="g-svg-148"
       fill="none"
       d="M 0,0 l 282.71999970563456,0 l 0,350 l-282.71999970563456 0 z"
       width="282.71999970563456"
@@ -15,12 +15,12 @@
     />
     <clipPath
       transform="matrix(1,0,0,1,-101.279999,-16)"
-      id="clip-path-198-107"
+      id="clip-path-148-107"
     >
-      <use href="#g-svg-198" transform="matrix(1,0,0,1,101.279999,16)" />
+      <use href="#g-svg-148" transform="matrix(1,0,0,1,101.279999,16)" />
     </clipPath>
     <path
-      id="g-svg-228"
+      id="g-svg-178"
       fill="none"
       d="M 0,0 l 282.71999970563456,0 l 0,350 l-282.71999970563456 0 z"
       width="282.71999970563456"
@@ -28,12 +28,12 @@
     />
     <clipPath
       transform="matrix(1,0,0,1,-101.279999,-16)"
-      id="clip-path-228-107"
+      id="clip-path-178-107"
     >
-      <use href="#g-svg-228" transform="matrix(1,0,0,1,101.279999,16)" />
+      <use href="#g-svg-178" transform="matrix(1,0,0,1,101.279999,16)" />
     </clipPath>
     <path
-      id="g-svg-258"
+      id="g-svg-208"
       fill="none"
       d="M 0,0 l 282.71999970563456,0 l 0,350 l-282.71999970563456 0 z"
       width="282.71999970563456"
@@ -41,9 +41,9 @@
     />
     <clipPath
       transform="matrix(1,0,0,1,-101.279999,-16)"
-      id="clip-path-258-107"
+      id="clip-path-208-107"
     >
-      <use href="#g-svg-258" transform="matrix(1,0,0,1,101.279999,16)" />
+      <use href="#g-svg-208" transform="matrix(1,0,0,1,101.279999,16)" />
     </clipPath>
   </defs>
   <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
@@ -363,7 +363,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-235"
+                      id="g-svg-185"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -384,7 +384,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-236"
+                      id="g-svg-186"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -405,7 +405,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-237"
+                      id="g-svg-187"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -426,7 +426,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-238"
+                      id="g-svg-188"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -447,7 +447,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-239"
+                      id="g-svg-189"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -475,7 +475,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-240"
+                      id="g-svg-190"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -503,7 +503,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-241"
+                      id="g-svg-191"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -531,7 +531,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-242"
+                      id="g-svg-192"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -559,7 +559,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-243"
+                      id="g-svg-193"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -587,7 +587,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-244"
+                      id="g-svg-194"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -637,300 +637,6 @@
                 </text>
               </g>
             </g>
-            <g
-              id="g-svg-125"
-              fill="none"
-              class="offscreen"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-126"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,101.279999,366)">
-                  <line
-                    id="g-svg-127"
-                    fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="282.71999970563456"
-                    y2="0"
-                    visibility="hidden"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-128"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-129"
-                  fill="none"
-                  transform="matrix(1,0,0,1,131.769409,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-134"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-130"
-                  fill="none"
-                  transform="matrix(1,0,0,1,187.204712,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-135"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-131"
-                  fill="none"
-                  transform="matrix(1,0,0,1,242.639999,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-136"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-132"
-                  fill="none"
-                  transform="matrix(1,0,0,1,298.075287,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-137"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-133"
-                  fill="none"
-                  transform="matrix(1,0,0,1,353.510590,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-138"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-139"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-140"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,131.769409,374)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-145"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-01
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-141"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,187.204712,374)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-146"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-02
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-142"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,242.639999,374)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-147"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-03
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-143"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,298.075287,374)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-148"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-04
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-144"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,353.510590,374)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-149"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-05
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
           </g>
         </g>
         <g
@@ -1074,7 +780,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-247"
+                      id="g-svg-197"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -1095,7 +801,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-248"
+                      id="g-svg-198"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -1116,7 +822,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-249"
+                      id="g-svg-199"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -1137,7 +843,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-250"
+                      id="g-svg-200"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -1158,7 +864,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-251"
+                      id="g-svg-201"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -1186,7 +892,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-252"
+                      id="g-svg-202"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1214,7 +920,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-253"
+                      id="g-svg-203"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1242,7 +948,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-254"
+                      id="g-svg-204"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1270,7 +976,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-255"
+                      id="g-svg-205"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1298,7 +1004,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-256"
+                      id="g-svg-206"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1323,7 +1029,7 @@
             <g
               id="g-svg-104"
               fill="none"
-              transform="matrix(1,0,0,1,35,196.750000)"
+              transform="matrix(1,0,0,1,35,185.250000)"
               class="axis-title-group"
             >
               <g transform="matrix(0,-1,1,0,11.500000,0)">
@@ -1347,305 +1053,11 @@
                 </text>
               </g>
             </g>
-            <g
-              id="g-svg-162"
-              fill="none"
-              class="offscreen"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-163"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,101.279999,16)">
-                  <line
-                    id="g-svg-164"
-                    fill="none"
-                    x1="0"
-                    y1="350"
-                    x2="0"
-                    y2="0"
-                    visibility="hidden"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-165"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-166"
-                  fill="none"
-                  transform="matrix(1,0,0,1,101.279999,366)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-171"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-167"
-                  fill="none"
-                  transform="matrix(1,0,0,1,101.279999,288.222229)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-172"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-168"
-                  fill="none"
-                  transform="matrix(1,0,0,1,101.279999,210.444443)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-173"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-169"
-                  fill="none"
-                  transform="matrix(1,0,0,1,101.279999,132.666672)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-174"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-170"
-                  fill="none"
-                  transform="matrix(1,0,0,1,101.279999,54.888889)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-175"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-176"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-177"
-                  fill="none"
-                  transform="matrix(1,0,0,1,93.279999,366)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-182"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      0
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-178"
-                  fill="none"
-                  transform="matrix(1,0,0,1,93.279999,288.222229)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-183"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      100
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-179"
-                  fill="none"
-                  transform="matrix(1,0,0,1,93.279999,210.444443)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-184"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      200
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-180"
-                  fill="none"
-                  transform="matrix(1,0,0,1,93.279999,132.666672)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-185"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      300
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-181"
-                  fill="none"
-                  transform="matrix(1,0,0,1,93.279999,54.888889)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-186"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      400
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
           </g>
         </g>
         <g
           transform="matrix(1,0,0,1,101.279999,16)"
-          clip-path="url(#clip-path-258-107)"
+          clip-path="url(#clip-path-208-107)"
         >
           <path
             id="g-svg-107"
@@ -1663,7 +1075,7 @@
           >
             <g transform="matrix(1,0,0,1,5.543530,0)">
               <path
-                id="g-svg-201"
+                id="g-svg-151"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 49.89176465393551,0 l 0,388.8888888888889 l-49.89176465393551 0 z"
                 width="49.89176465393551"
@@ -1676,7 +1088,7 @@
             </g>
             <g transform="matrix(1,0,0,1,60.978825,-77.777779)">
               <path
-                id="g-svg-202"
+                id="g-svg-152"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 49.89176465393551,0 l 0,466.66666666666674 l-49.89176465393551 0 z"
                 width="49.89176465393551"
@@ -1689,7 +1101,7 @@
             </g>
             <g transform="matrix(1,0,0,1,116.414116,155.555557)">
               <path
-                id="g-svg-203"
+                id="g-svg-153"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 49.891764653935496,0 l 0,233.33333333333337 l-49.891764653935496 0 z"
                 width="49.891764653935496"
@@ -1702,7 +1114,7 @@
             </g>
             <g transform="matrix(1,0,0,1,171.849411,-77.777779)">
               <path
-                id="g-svg-229"
+                id="g-svg-179"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 49.891764653935496,0 l 0,466.66666666666674 l-49.891764653935496 0 z"
                 width="49.891764653935496"
@@ -1715,7 +1127,7 @@
             </g>
             <g transform="matrix(1,0,0,1,227.284698,155.555557)">
               <path
-                id="g-svg-230"
+                id="g-svg-180"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 49.89176465393547,0 l 0,233.33333333333337 l-49.89176465393547 0 z"
                 width="49.89176465393547"
diff --git a/__tests__/integration/snapshots/api/chart-emit-slider-filter/step0.svg b/__tests__/integration/snapshots/api/chart-emit-slider-filter/step0.svg
index 06d7dbedb1..df769c1518 100644
--- a/__tests__/integration/snapshots/api/chart-emit-slider-filter/step0.svg
+++ b/__tests__/integration/snapshots/api/chart-emit-slider-filter/step0.svg
@@ -7,7 +7,7 @@
 >
   <defs>
     <path
-      id="g-svg-506"
+      id="g-svg-388"
       fill="none"
       d="M 0,0 l 504.71999970563456,0 l 0,312 l-504.71999970563456 0 z"
       width="504.71999970563456"
@@ -15,9 +15,9 @@
     />
     <clipPath
       transform="matrix(1,0,0,1,-119.279999,-16)"
-      id="clip-path-506-217"
+      id="clip-path-388-217"
     >
-      <use href="#g-svg-506" transform="matrix(1,0,0,1,119.279999,16)" />
+      <use href="#g-svg-388" transform="matrix(1,0,0,1,119.279999,16)" />
     </clipPath>
   </defs>
   <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
@@ -187,14 +187,14 @@
                   class="handle-icon-group"
                 >
                   <g
-                    id="g-svg-472"
+                    id="g-svg-354"
                     fill="none"
                     transform="matrix(1,0,0,1,0,0)"
                     class="handle-icon"
                   >
                     <g transform="matrix(1,0,0,1,-5,-12)">
                       <path
-                        id="g-svg-473"
+                        id="g-svg-355"
                         fill="rgba(247,247,247,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
@@ -206,7 +206,7 @@
                       />
                       <g transform="matrix(1,0,0,1,3.333333,6)">
                         <line
-                          id="g-svg-474"
+                          id="g-svg-356"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -220,7 +220,7 @@
                       </g>
                       <g transform="matrix(1,0,0,1,6.666667,6)">
                         <line
-                          id="g-svg-475"
+                          id="g-svg-357"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -272,14 +272,14 @@
                   class="handle-icon-group"
                 >
                   <g
-                    id="g-svg-478"
+                    id="g-svg-360"
                     fill="none"
                     transform="matrix(1,0,0,1,0,0)"
                     class="handle-icon"
                   >
                     <g transform="matrix(1,0,0,1,-5,-12)">
                       <path
-                        id="g-svg-479"
+                        id="g-svg-361"
                         fill="rgba(247,247,247,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
@@ -291,7 +291,7 @@
                       />
                       <g transform="matrix(1,0,0,1,3.333333,6)">
                         <line
-                          id="g-svg-480"
+                          id="g-svg-362"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -305,7 +305,7 @@
                       </g>
                       <g transform="matrix(1,0,0,1,6.666667,6)">
                         <line
-                          id="g-svg-481"
+                          id="g-svg-363"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -657,7 +657,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-483"
+                      id="g-svg-365"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -678,7 +678,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-484"
+                      id="g-svg-366"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -699,7 +699,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-485"
+                      id="g-svg-367"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -727,7 +727,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-486"
+                      id="g-svg-368"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -755,7 +755,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-487"
+                      id="g-svg-369"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -783,7 +783,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-488"
+                      id="g-svg-370"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -808,7 +808,7 @@
             <g
               id="g-svg-166"
               fill="none"
-              transform="matrix(1,0,0,1,371.639984,423.600006)"
+              transform="matrix(1,0,0,1,371.639984,421.679993)"
               class="axis-title-group"
             >
               <g transform="matrix(1,0,0,1,0,0)">
@@ -833,1609 +833,151 @@
                 </text>
               </g>
             </g>
-            <g
-              id="g-svg-275"
-              fill="none"
-              class="offscreen"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-276"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,119.279999,328)">
-                  <line
-                    id="g-svg-277"
-                    fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="504.71999970563456"
-                    y2="0"
-                    visibility="hidden"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-278"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-279"
-                  fill="none"
-                  transform="matrix(1,0,0,1,133.090744,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-299"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-280"
-                  fill="none"
-                  transform="matrix(1,0,0,1,158.201187,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-300"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-281"
-                  fill="none"
-                  transform="matrix(1,0,0,1,183.311646,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-301"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-282"
-                  fill="none"
-                  transform="matrix(1,0,0,1,208.422089,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-302"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-283"
-                  fill="none"
-                  transform="matrix(1,0,0,1,233.532532,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-303"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-284"
-                  fill="none"
-                  transform="matrix(1,0,0,1,258.642975,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-304"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-285"
-                  fill="none"
-                  transform="matrix(1,0,0,1,283.753418,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-305"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-286"
-                  fill="none"
-                  transform="matrix(1,0,0,1,308.863892,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-306"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-287"
-                  fill="none"
-                  transform="matrix(1,0,0,1,333.974335,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-307"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-288"
-                  fill="none"
-                  transform="matrix(1,0,0,1,359.084778,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-308"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-289"
-                  fill="none"
-                  transform="matrix(1,0,0,1,384.195221,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-309"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-290"
-                  fill="none"
-                  transform="matrix(1,0,0,1,409.305664,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-310"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-291"
-                  fill="none"
-                  transform="matrix(1,0,0,1,434.416107,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-311"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-292"
-                  fill="none"
-                  transform="matrix(1,0,0,1,459.526581,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-312"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-293"
-                  fill="none"
-                  transform="matrix(1,0,0,1,484.637024,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-313"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-294"
-                  fill="none"
-                  transform="matrix(1,0,0,1,509.747467,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-314"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-295"
-                  fill="none"
-                  transform="matrix(1,0,0,1,534.857910,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-315"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-296"
-                  fill="none"
-                  transform="matrix(1,0,0,1,559.968384,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-316"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-297"
-                  fill="none"
-                  transform="matrix(1,0,0,1,585.078796,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-317"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-298"
-                  fill="none"
-                  transform="matrix(1,0,0,1,610.189270,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-318"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-319"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-320"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,133.090744,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-340"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-01
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-321"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,158.201187,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-341"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-02
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-322"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,183.311646,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-342"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-03
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-323"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,208.422089,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-343"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-04
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-324"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,233.532532,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-344"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-05
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-325"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,258.642975,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-345"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-06
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-326"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,283.753418,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-346"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-07
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-327"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,308.863892,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-347"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-08
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-328"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,333.974335,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-348"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-09
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-329"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,359.084778,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-349"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-10
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-330"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,384.195221,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-350"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-11
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-331"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,409.305664,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-351"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-12
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-332"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,434.416107,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-352"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-01
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-333"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,459.526581,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-353"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-02
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-334"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,484.637024,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-354"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-03
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-335"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,509.747467,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-355"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-04
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-336"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,534.857910,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-356"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-05
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-337"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,559.968384,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-357"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-06
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-338"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,585.078796,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-358"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-07
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-339"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,610.189270,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-359"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-08
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
-          </g>
-        </g>
-        <g
-          id="g-svg-17"
-          fill="none"
-          transform="matrix(1,0,0,1,0,0)"
-          class="component"
-        >
-          <g
-            id="g-svg-169"
-            fill="none"
-            class="axis"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-170"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-171"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-172"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,119.279999,328)">
-                    <path
-                      id="g-svg-174"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 504.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,119.279999,276)">
-                    <path
-                      id="g-svg-175"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 504.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,119.279999,224)">
-                    <path
-                      id="g-svg-176"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 504.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,119.279999,172)">
-                    <path
-                      id="g-svg-177"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 504.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,119.279999,120)">
-                    <path
-                      id="g-svg-178"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 504.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,119.279999,68)">
-                    <path
-                      id="g-svg-179"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 504.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,119.279999,16)">
-                    <path
-                      id="g-svg-180"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 504.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-173"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
-              </g>
-            </g>
-            <g
-              id="g-svg-181"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-182"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,119.279999,16)">
-                  <line
-                    id="g-svg-183"
-                    fill="none"
-                    x1="0"
-                    y1="312"
-                    x2="0"
-                    y2="0"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-184"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-185"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-491"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-186"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,276)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-492"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-187"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,224)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-493"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-188"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,172)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-494"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-189"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,120)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-495"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-190"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,68)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-496"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-191"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,16)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-497"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-199"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-200"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,328)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-498"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      0
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-201"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,276)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-499"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      100
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-202"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,224)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-500"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      200
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-203"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,172)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-501"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      300
-                    </text>
-                  </g>
-                </g>
+          </g>
+        </g>
+        <g
+          id="g-svg-17"
+          fill="none"
+          transform="matrix(1,0,0,1,0,0)"
+          class="component"
+        >
+          <g
+            id="g-svg-169"
+            fill="none"
+            class="axis"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g
+              id="g-svg-170"
+              fill="none"
+              transform="matrix(1,0,0,1,0,0)"
+              class="axis-grid-group"
+            >
+              <g
+                id="g-svg-171"
+                fill="none"
+                transform="matrix(1,0,0,1,0,0)"
+                class="axis-grid"
+              >
                 <g
-                  id="g-svg-204"
+                  id="g-svg-172"
                   fill="none"
-                  transform="matrix(1,0,0,1,111.279999,120)"
-                  class="axis-label"
+                  transform="matrix(1,0,0,1,0,0)"
+                  class="grid-line-group"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-502"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      400
-                    </text>
+                  <g transform="matrix(1,0,0,1,119.279999,328)">
+                    <path
+                      id="g-svg-174"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 504.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
                   </g>
-                </g>
-                <g
-                  id="g-svg-205"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,68)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-503"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      500
-                    </text>
+                  <g transform="matrix(1,0,0,1,119.279999,276)">
+                    <path
+                      id="g-svg-175"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 504.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,119.279999,224)">
+                    <path
+                      id="g-svg-176"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 504.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,119.279999,172)">
+                    <path
+                      id="g-svg-177"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 504.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,119.279999,120)">
+                    <path
+                      id="g-svg-178"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 504.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,119.279999,68)">
+                    <path
+                      id="g-svg-179"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 504.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,119.279999,16)">
+                    <path
+                      id="g-svg-180"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 504.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
                   </g>
                 </g>
                 <g
-                  id="g-svg-206"
+                  id="g-svg-173"
                   fill="none"
-                  transform="matrix(1,0,0,1,111.279999,16)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-504"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      600
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
-            <g
-              id="g-svg-214"
-              fill="none"
-              transform="matrix(1,0,0,1,53,172)"
-              class="axis-title-group"
-            >
-              <g transform="matrix(0,-1,1,0,11.500000,0)">
-                <text
-                  id="g-svg-215"
-                  fill="rgba(29,33,41,1)"
-                  dominant-baseline="central"
-                  paint-order="stroke"
-                  dx="0.5"
-                  font-family="sans-serif"
-                  font-size="12"
-                  font-style="normal"
-                  font-variant="normal"
-                  font-weight="normal"
-                  stroke-width="1"
-                  text-anchor="middle"
-                  class="axis-title"
-                  opacity="0.9"
-                >
-                  value
-                </text>
+                  transform="matrix(1,0,0,1,0,0)"
+                  class="grid-region-group"
+                />
               </g>
             </g>
             <g
-              id="g-svg-402"
+              id="g-svg-181"
               fill="none"
-              class="offscreen"
               transform="matrix(1,0,0,1,0,0)"
+              class="axis-main-group"
             >
               <g
-                id="g-svg-403"
+                id="g-svg-182"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-line-group"
               >
                 <g transform="matrix(1,0,0,1,119.279999,16)">
                   <line
-                    id="g-svg-404"
+                    id="g-svg-183"
                     fill="none"
                     x1="0"
                     y1="312"
                     x2="0"
                     y2="0"
-                    visibility="hidden"
                     class="axis-line axis-line"
                     stroke-width="0.5"
                     stroke="rgba(29,33,41,1)"
@@ -2445,26 +987,25 @@
                 </g>
               </g>
               <g
-                id="g-svg-405"
+                id="g-svg-184"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-tick-group"
               >
                 <g
-                  id="g-svg-406"
+                  id="g-svg-185"
                   fill="none"
                   transform="matrix(1,0,0,1,119.279999,328)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-413"
+                      id="g-svg-373"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2473,20 +1014,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-407"
+                  id="g-svg-186"
                   fill="none"
                   transform="matrix(1,0,0,1,119.279999,276)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-414"
+                      id="g-svg-374"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2495,20 +1035,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-408"
+                  id="g-svg-187"
                   fill="none"
                   transform="matrix(1,0,0,1,119.279999,224)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-415"
+                      id="g-svg-375"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2517,20 +1056,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-409"
+                  id="g-svg-188"
                   fill="none"
                   transform="matrix(1,0,0,1,119.279999,172)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-416"
+                      id="g-svg-376"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2539,20 +1077,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-410"
+                  id="g-svg-189"
                   fill="none"
                   transform="matrix(1,0,0,1,119.279999,120)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-417"
+                      id="g-svg-377"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2561,20 +1098,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-411"
+                  id="g-svg-190"
                   fill="none"
                   transform="matrix(1,0,0,1,119.279999,68)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-418"
+                      id="g-svg-378"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2583,20 +1119,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-412"
+                  id="g-svg-191"
                   fill="none"
                   transform="matrix(1,0,0,1,119.279999,16)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-419"
+                      id="g-svg-379"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2606,20 +1141,20 @@
                 </g>
               </g>
               <g
-                id="g-svg-420"
+                id="g-svg-199"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-label-group"
               >
                 <g
-                  id="g-svg-421"
+                  id="g-svg-200"
                   fill="none"
                   transform="matrix(1,0,0,1,111.279999,328)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-428"
+                      id="g-svg-380"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2631,23 +1166,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-422"
+                  id="g-svg-201"
                   fill="none"
                   transform="matrix(1,0,0,1,111.279999,276)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-429"
+                      id="g-svg-381"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2659,23 +1194,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       100
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-423"
+                  id="g-svg-202"
                   fill="none"
                   transform="matrix(1,0,0,1,111.279999,224)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-430"
+                      id="g-svg-382"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2687,23 +1222,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       200
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-424"
+                  id="g-svg-203"
                   fill="none"
                   transform="matrix(1,0,0,1,111.279999,172)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-431"
+                      id="g-svg-383"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2715,23 +1250,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       300
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-425"
+                  id="g-svg-204"
                   fill="none"
                   transform="matrix(1,0,0,1,111.279999,120)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-432"
+                      id="g-svg-384"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2743,23 +1278,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       400
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-426"
+                  id="g-svg-205"
                   fill="none"
                   transform="matrix(1,0,0,1,111.279999,68)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-433"
+                      id="g-svg-385"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2771,23 +1306,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       500
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-427"
+                  id="g-svg-206"
                   fill="none"
                   transform="matrix(1,0,0,1,111.279999,16)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-434"
+                      id="g-svg-386"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2799,9 +1334,9 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       600
                     </text>
@@ -2809,11 +1344,38 @@
                 </g>
               </g>
             </g>
+            <g
+              id="g-svg-214"
+              fill="none"
+              transform="matrix(1,0,0,1,53,172)"
+              class="axis-title-group"
+            >
+              <g transform="matrix(0,-1,1,0,11.500000,0)">
+                <text
+                  id="g-svg-215"
+                  fill="rgba(29,33,41,1)"
+                  dominant-baseline="central"
+                  paint-order="stroke"
+                  dx="0.5"
+                  font-family="sans-serif"
+                  font-size="12"
+                  font-style="normal"
+                  font-variant="normal"
+                  font-weight="normal"
+                  stroke-width="1"
+                  text-anchor="middle"
+                  class="axis-title"
+                  opacity="0.9"
+                >
+                  value
+                </text>
+              </g>
+            </g>
           </g>
         </g>
         <g
           transform="matrix(1,0,0,1,119.279999,16)"
-          clip-path="url(#clip-path-506-217)"
+          clip-path="url(#clip-path-388-217)"
         >
           <path
             id="g-svg-217"
@@ -2831,7 +1393,7 @@
           >
             <g transform="matrix(1,0,0,1,16.281290,260)">
               <path
-                id="g-svg-450"
+                id="g-svg-332"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 146.53161281776488,0 l 0,52 l-146.53161281776488 0 z"
                 width="146.53161281776488"
@@ -2844,7 +1406,7 @@
             </g>
             <g transform="matrix(1,0,0,1,179.094193,104)">
               <path
-                id="g-svg-451"
+                id="g-svg-333"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 146.53161281776494,0 l 0,208 l-146.53161281776494 0 z"
                 width="146.53161281776494"
@@ -2857,7 +1419,7 @@
             </g>
             <g transform="matrix(1,0,0,1,341.907104,52)">
               <path
-                id="g-svg-452"
+                id="g-svg-334"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 146.53161281776482,0 l 0,260 l-146.53161281776482 0 z"
                 width="146.53161281776482"
diff --git a/__tests__/integration/snapshots/api/chart-emit-slider-filter/step1.svg b/__tests__/integration/snapshots/api/chart-emit-slider-filter/step1.svg
index b51540e369..039664da52 100644
--- a/__tests__/integration/snapshots/api/chart-emit-slider-filter/step1.svg
+++ b/__tests__/integration/snapshots/api/chart-emit-slider-filter/step1.svg
@@ -7,7 +7,7 @@
 >
   <defs>
     <path
-      id="g-svg-506"
+      id="g-svg-388"
       fill="none"
       d="M 0,0 l 504.71999970563456,0 l 0,312 l-504.71999970563456 0 z"
       width="504.71999970563456"
@@ -15,12 +15,12 @@
     />
     <clipPath
       transform="matrix(1,0,0,1,-119.279999,-16)"
-      id="clip-path-506-217"
+      id="clip-path-388-217"
     >
-      <use href="#g-svg-506" transform="matrix(1,0,0,1,119.279999,16)" />
+      <use href="#g-svg-388" transform="matrix(1,0,0,1,119.279999,16)" />
     </clipPath>
     <path
-      id="g-svg-542"
+      id="g-svg-424"
       fill="none"
       d="M 0,0 l 504.71999970563456,0 l 0,312 l-504.71999970563456 0 z"
       width="504.71999970563456"
@@ -28,9 +28,9 @@
     />
     <clipPath
       transform="matrix(1,0,0,1,-119.279999,-16)"
-      id="clip-path-542-217"
+      id="clip-path-424-217"
     >
-      <use href="#g-svg-542" transform="matrix(1,0,0,1,119.279999,16)" />
+      <use href="#g-svg-424" transform="matrix(1,0,0,1,119.279999,16)" />
     </clipPath>
   </defs>
   <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
@@ -200,14 +200,14 @@
                   class="handle-icon-group"
                 >
                   <g
-                    id="g-svg-472"
+                    id="g-svg-354"
                     fill="none"
                     transform="matrix(1,0,0,1,0,0)"
                     class="handle-icon"
                   >
                     <g transform="matrix(1,0,0,1,-5,-12)">
                       <path
-                        id="g-svg-473"
+                        id="g-svg-355"
                         fill="rgba(247,247,247,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
@@ -219,7 +219,7 @@
                       />
                       <g transform="matrix(1,0,0,1,3.333333,6)">
                         <line
-                          id="g-svg-474"
+                          id="g-svg-356"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -233,7 +233,7 @@
                       </g>
                       <g transform="matrix(1,0,0,1,6.666667,6)">
                         <line
-                          id="g-svg-475"
+                          id="g-svg-357"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -285,14 +285,14 @@
                   class="handle-icon-group"
                 >
                   <g
-                    id="g-svg-478"
+                    id="g-svg-360"
                     fill="none"
                     transform="matrix(1,0,0,1,0,0)"
                     class="handle-icon"
                   >
                     <g transform="matrix(1,0,0,1,-5,-12)">
                       <path
-                        id="g-svg-479"
+                        id="g-svg-361"
                         fill="rgba(247,247,247,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
@@ -304,7 +304,7 @@
                       />
                       <g transform="matrix(1,0,0,1,3.333333,6)">
                         <line
-                          id="g-svg-480"
+                          id="g-svg-362"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -318,7 +318,7 @@
                       </g>
                       <g transform="matrix(1,0,0,1,6.666667,6)">
                         <line
-                          id="g-svg-481"
+                          id="g-svg-363"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -454,14 +454,14 @@
                   class="handle-icon-group"
                 >
                   <g
-                    id="g-svg-512"
+                    id="g-svg-394"
                     fill="none"
                     transform="matrix(0,1,-1,0,0,0)"
                     class="handle-icon"
                   >
                     <g transform="matrix(1,0,0,1,-5,-12)">
                       <path
-                        id="g-svg-513"
+                        id="g-svg-395"
                         fill="rgba(247,247,247,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
@@ -473,7 +473,7 @@
                       />
                       <g transform="matrix(1,0,0,1,3.333333,6)">
                         <line
-                          id="g-svg-514"
+                          id="g-svg-396"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -487,7 +487,7 @@
                       </g>
                       <g transform="matrix(1,0,0,1,6.666667,6)">
                         <line
-                          id="g-svg-515"
+                          id="g-svg-397"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -539,14 +539,14 @@
                   class="handle-icon-group"
                 >
                   <g
-                    id="g-svg-518"
+                    id="g-svg-400"
                     fill="none"
                     transform="matrix(0,1,-1,0,0,0)"
                     class="handle-icon"
                   >
                     <g transform="matrix(1,0,0,1,-5,-12)">
                       <path
-                        id="g-svg-519"
+                        id="g-svg-401"
                         fill="rgba(247,247,247,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
@@ -558,7 +558,7 @@
                       />
                       <g transform="matrix(1,0,0,1,3.333333,6)">
                         <line
-                          id="g-svg-520"
+                          id="g-svg-402"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -572,7 +572,7 @@
                       </g>
                       <g transform="matrix(1,0,0,1,6.666667,6)">
                         <line
-                          id="g-svg-521"
+                          id="g-svg-403"
                           fill="rgba(247,247,247,1)"
                           x1="0"
                           y1="0"
@@ -674,7 +674,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-523"
+                      id="g-svg-405"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -695,7 +695,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-524"
+                      id="g-svg-406"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -716,7 +716,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-525"
+                      id="g-svg-407"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -744,7 +744,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-526"
+                      id="g-svg-408"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -772,7 +772,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-527"
+                      id="g-svg-409"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -800,7 +800,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-528"
+                      id="g-svg-410"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -825,7 +825,7 @@
             <g
               id="g-svg-166"
               fill="none"
-              transform="matrix(1,0,0,1,371.639984,423.600006)"
+              transform="matrix(1,0,0,1,371.639984,421.679993)"
               class="axis-title-group"
             >
               <g transform="matrix(1,0,0,1,0,0)">
@@ -850,1050 +850,6 @@
                 </text>
               </g>
             </g>
-            <g
-              id="g-svg-275"
-              fill="none"
-              class="offscreen"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-276"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,119.279999,328)">
-                  <line
-                    id="g-svg-277"
-                    fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="504.71999970563456"
-                    y2="0"
-                    visibility="hidden"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-278"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-279"
-                  fill="none"
-                  transform="matrix(1,0,0,1,133.090744,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-299"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-280"
-                  fill="none"
-                  transform="matrix(1,0,0,1,158.201187,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-300"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-281"
-                  fill="none"
-                  transform="matrix(1,0,0,1,183.311646,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-301"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-282"
-                  fill="none"
-                  transform="matrix(1,0,0,1,208.422089,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-302"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-283"
-                  fill="none"
-                  transform="matrix(1,0,0,1,233.532532,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-303"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-284"
-                  fill="none"
-                  transform="matrix(1,0,0,1,258.642975,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-304"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-285"
-                  fill="none"
-                  transform="matrix(1,0,0,1,283.753418,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-305"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-286"
-                  fill="none"
-                  transform="matrix(1,0,0,1,308.863892,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-306"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-287"
-                  fill="none"
-                  transform="matrix(1,0,0,1,333.974335,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-307"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-288"
-                  fill="none"
-                  transform="matrix(1,0,0,1,359.084778,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-308"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-289"
-                  fill="none"
-                  transform="matrix(1,0,0,1,384.195221,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-309"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-290"
-                  fill="none"
-                  transform="matrix(1,0,0,1,409.305664,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-310"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-291"
-                  fill="none"
-                  transform="matrix(1,0,0,1,434.416107,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-311"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-292"
-                  fill="none"
-                  transform="matrix(1,0,0,1,459.526581,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-312"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-293"
-                  fill="none"
-                  transform="matrix(1,0,0,1,484.637024,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-313"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-294"
-                  fill="none"
-                  transform="matrix(1,0,0,1,509.747467,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-314"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-295"
-                  fill="none"
-                  transform="matrix(1,0,0,1,534.857910,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-315"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-296"
-                  fill="none"
-                  transform="matrix(1,0,0,1,559.968384,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-316"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-297"
-                  fill="none"
-                  transform="matrix(1,0,0,1,585.078796,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-317"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-298"
-                  fill="none"
-                  transform="matrix(1,0,0,1,610.189270,328)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-318"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-319"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-320"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,133.090744,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-340"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-01
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-321"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,158.201187,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-341"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-02
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-322"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,183.311646,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-342"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-03
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-323"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,208.422089,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-343"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-04
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-324"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,233.532532,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-344"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-05
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-325"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,258.642975,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-345"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-06
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-326"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,283.753418,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-346"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-07
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-327"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,308.863892,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-347"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-08
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-328"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,333.974335,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-348"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-09
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-329"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,359.084778,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-349"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-10
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-330"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,384.195221,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-350"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-11
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-331"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,409.305664,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-351"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2001-12
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-332"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,434.416107,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-352"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-01
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-333"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,459.526581,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-353"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-02
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-334"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,484.637024,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-354"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-03
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-335"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,509.747467,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-355"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-04
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-336"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,534.857910,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-356"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-05
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-337"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,559.968384,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-357"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-06
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-338"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,585.078796,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-358"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-07
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-339"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,610.189270,336)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-359"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="left"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2002-08
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
           </g>
         </g>
         <g
@@ -1966,371 +922,55 @@
                     <path
                       id="g-svg-177"
                       fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 504.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,119.279999,47.200001)">
-                    <path
-                      id="g-svg-178"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 504.71999970563456,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-173"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
-              </g>
-            </g>
-            <g
-              id="g-svg-181"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-182"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,119.279999,16)">
-                  <line
-                    id="g-svg-183"
-                    fill="none"
-                    x1="0"
-                    y1="312"
-                    x2="0"
-                    y2="0"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-184"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-185"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,296.799988)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-531"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-186"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,234.399994)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-532"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-187"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,172)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-533"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-188"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,109.599998)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-534"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-189"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,47.200001)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-535"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-199"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-200"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,296.799988)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-536"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      100
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-201"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,234.399994)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-537"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="hidden"
-                    >
-                      200
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-202"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,172)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-538"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      300
-                    </text>
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 504.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
                   </g>
-                </g>
-                <g
-                  id="g-svg-203"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,109.599998)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-539"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="hidden"
-                    >
-                      400
-                    </text>
+                  <g transform="matrix(1,0,0,1,119.279999,47.200001)">
+                    <path
+                      id="g-svg-178"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 504.71999970563456,0"
+                      stroke-opacity="0.1"
+                    />
                   </g>
                 </g>
                 <g
-                  id="g-svg-204"
+                  id="g-svg-173"
                   fill="none"
-                  transform="matrix(1,0,0,1,111.279999,47.200001)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-540"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      500
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
-            <g
-              id="g-svg-214"
-              fill="none"
-              transform="matrix(1,0,0,1,53,172)"
-              class="axis-title-group"
-            >
-              <g transform="matrix(0,-1,1,0,11.500000,0)">
-                <text
-                  id="g-svg-215"
-                  fill="rgba(29,33,41,1)"
-                  dominant-baseline="central"
-                  paint-order="stroke"
-                  dx="0.5"
-                  font-family="sans-serif"
-                  font-size="12"
-                  font-style="normal"
-                  font-variant="normal"
-                  font-weight="normal"
-                  stroke-width="1"
-                  text-anchor="middle"
-                  class="axis-title"
-                  opacity="0.9"
-                >
-                  value
-                </text>
+                  transform="matrix(1,0,0,1,0,0)"
+                  class="grid-region-group"
+                />
               </g>
             </g>
             <g
-              id="g-svg-402"
+              id="g-svg-181"
               fill="none"
-              class="offscreen"
               transform="matrix(1,0,0,1,0,0)"
+              class="axis-main-group"
             >
               <g
-                id="g-svg-403"
+                id="g-svg-182"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-line-group"
               >
                 <g transform="matrix(1,0,0,1,119.279999,16)">
                   <line
-                    id="g-svg-404"
+                    id="g-svg-183"
                     fill="none"
                     x1="0"
                     y1="312"
                     x2="0"
                     y2="0"
-                    visibility="hidden"
                     class="axis-line axis-line"
                     stroke-width="0.5"
                     stroke="rgba(29,33,41,1)"
@@ -2340,15 +980,15 @@
                 </g>
               </g>
               <g
-                id="g-svg-405"
+                id="g-svg-184"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-tick-group"
               >
                 <g
-                  id="g-svg-406"
+                  id="g-svg-185"
                   fill="none"
-                  transform="matrix(1,0,0,1,119.279999,328)"
+                  transform="matrix(1,0,0,1,119.279999,296.799988)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2359,7 +999,6 @@
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2368,9 +1007,9 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-407"
+                  id="g-svg-186"
                   fill="none"
-                  transform="matrix(1,0,0,1,119.279999,276)"
+                  transform="matrix(1,0,0,1,119.279999,234.399994)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2381,7 +1020,6 @@
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2390,9 +1028,9 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-408"
+                  id="g-svg-187"
                   fill="none"
-                  transform="matrix(1,0,0,1,119.279999,224)"
+                  transform="matrix(1,0,0,1,119.279999,172)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2403,7 +1041,6 @@
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2412,9 +1049,9 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-409"
+                  id="g-svg-188"
                   fill="none"
-                  transform="matrix(1,0,0,1,119.279999,172)"
+                  transform="matrix(1,0,0,1,119.279999,109.599998)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2425,7 +1062,6 @@
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2434,9 +1070,9 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-410"
+                  id="g-svg-189"
                   fill="none"
-                  transform="matrix(1,0,0,1,119.279999,120)"
+                  transform="matrix(1,0,0,1,119.279999,47.200001)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
@@ -2447,51 +1083,6 @@
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-411"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,68)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-418"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-412"
-                  fill="none"
-                  transform="matrix(1,0,0,1,119.279999,16)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-419"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -2501,48 +1092,20 @@
                 </g>
               </g>
               <g
-                id="g-svg-420"
+                id="g-svg-199"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-label-group"
               >
                 <g
-                  id="g-svg-421"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,328)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-428"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      0
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-422"
+                  id="g-svg-200"
                   fill="none"
-                  transform="matrix(1,0,0,1,111.279999,276)"
+                  transform="matrix(1,0,0,1,111.279999,296.799988)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-429"
+                      id="g-svg-418"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2554,23 +1117,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       100
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-423"
+                  id="g-svg-201"
                   fill="none"
-                  transform="matrix(1,0,0,1,111.279999,224)"
+                  transform="matrix(1,0,0,1,111.279999,234.399994)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-430"
+                      id="g-svg-419"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2582,23 +1145,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="hidden"
                     >
                       200
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-424"
+                  id="g-svg-202"
                   fill="none"
                   transform="matrix(1,0,0,1,111.279999,172)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-431"
+                      id="g-svg-420"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2610,23 +1173,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       300
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-425"
+                  id="g-svg-203"
                   fill="none"
-                  transform="matrix(1,0,0,1,111.279999,120)"
+                  transform="matrix(1,0,0,1,111.279999,109.599998)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-432"
+                      id="g-svg-421"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2638,23 +1201,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="hidden"
                     >
                       400
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-426"
+                  id="g-svg-204"
                   fill="none"
-                  transform="matrix(1,0,0,1,111.279999,68)"
+                  transform="matrix(1,0,0,1,111.279999,47.200001)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-433"
+                      id="g-svg-422"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2666,49 +1229,48 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       500
                     </text>
                   </g>
                 </g>
-                <g
-                  id="g-svg-427"
-                  fill="none"
-                  transform="matrix(1,0,0,1,111.279999,16)"
-                  class="axis-label"
+              </g>
+            </g>
+            <g
+              id="g-svg-214"
+              fill="none"
+              transform="matrix(1,0,0,1,53,172)"
+              class="axis-title-group"
+            >
+              <g transform="matrix(0,-1,1,0,11.500000,0)">
+                <text
+                  id="g-svg-215"
+                  fill="rgba(29,33,41,1)"
+                  dominant-baseline="central"
+                  paint-order="stroke"
+                  dx="0.5"
+                  font-family="sans-serif"
+                  font-size="12"
+                  font-style="normal"
+                  font-variant="normal"
+                  font-weight="normal"
+                  stroke-width="1"
+                  text-anchor="middle"
+                  class="axis-title"
+                  opacity="0.9"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-434"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      600
-                    </text>
-                  </g>
-                </g>
+                  value
+                </text>
               </g>
             </g>
           </g>
         </g>
         <g
           transform="matrix(1,0,0,1,119.279999,16)"
-          clip-path="url(#clip-path-542-217)"
+          clip-path="url(#clip-path-424-217)"
         >
           <path
             id="g-svg-217"
@@ -2726,7 +1288,7 @@
           >
             <g transform="matrix(1,0,0,1,16.281290,280.799988)">
               <path
-                id="g-svg-450"
+                id="g-svg-332"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 146.53161281776488,0 l 0,62.400000000000034 l-146.53161281776488 0 z"
                 width="146.53161281776488"
@@ -2739,7 +1301,7 @@
             </g>
             <g transform="matrix(1,0,0,1,179.094193,93.599998)">
               <path
-                id="g-svg-451"
+                id="g-svg-333"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 146.53161281776494,0 l 0,249.60000000000002 l-146.53161281776494 0 z"
                 width="146.53161281776494"
@@ -2752,7 +1314,7 @@
             </g>
             <g transform="matrix(1,0,0,1,341.907104,31.200001)">
               <path
-                id="g-svg-452"
+                id="g-svg-334"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 146.53161281776482,0 l 0,312.00000000000006 l-146.53161281776482 0 z"
                 width="146.53161281776482"
diff --git a/__tests__/integration/snapshots/api/chart-render-update-attributes/step0.svg b/__tests__/integration/snapshots/api/chart-render-update-attributes/step0.svg
index e7bc423bea..538baa01c0 100644
--- a/__tests__/integration/snapshots/api/chart-render-update-attributes/step0.svg
+++ b/__tests__/integration/snapshots/api/chart-render-update-attributes/step0.svg
@@ -190,7 +190,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-87"
+                      id="g-svg-62"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -211,7 +211,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-88"
+                      id="g-svg-63"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -232,7 +232,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-89"
+                      id="g-svg-64"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -253,7 +253,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-90"
+                      id="g-svg-65"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -274,7 +274,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-91"
+                      id="g-svg-66"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -302,7 +302,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-92"
+                      id="g-svg-67"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -330,7 +330,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-93"
+                      id="g-svg-68"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -358,7 +358,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-94"
+                      id="g-svg-69"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -386,7 +386,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-95"
+                      id="g-svg-70"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -414,7 +414,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-96"
+                      id="g-svg-71"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -463,300 +463,6 @@
                 </text>
               </g>
             </g>
-            <g
-              id="g-svg-62"
-              fill="none"
-              class="offscreen"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-63"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,81.120003,16)">
-                  <line
-                    id="g-svg-64"
-                    fill="none"
-                    x1="0"
-                    y1="448"
-                    x2="0"
-                    y2="0"
-                    visibility="hidden"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-65"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-66"
-                  fill="none"
-                  transform="matrix(1,0,0,1,81.120003,432.119843)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-71"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-67"
-                  fill="none"
-                  transform="matrix(1,0,0,1,81.120003,348.224731)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-72"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-68"
-                  fill="none"
-                  transform="matrix(1,0,0,1,81.120003,264.329590)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-73"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-69"
-                  fill="none"
-                  transform="matrix(1,0,0,1,81.120003,180.434464)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-74"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-70"
-                  fill="none"
-                  transform="matrix(1,0,0,1,81.120003,96.539330)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-75"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-76"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-77"
-                  fill="none"
-                  transform="matrix(1,0,0,1,73.120003,432.119843)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-82"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      94
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-78"
-                  fill="none"
-                  transform="matrix(1,0,0,1,73.120003,348.224731)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-83"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      96
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-79"
-                  fill="none"
-                  transform="matrix(1,0,0,1,73.120003,264.329590)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-84"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      98
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-80"
-                  fill="none"
-                  transform="matrix(1,0,0,1,73.120003,180.434464)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-85"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      100
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-81"
-                  fill="none"
-                  transform="matrix(1,0,0,1,73.120003,96.539330)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-86"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      102
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
           </g>
         </g>
         <g transform="matrix(1,0,0,1,81.120003,16)">
@@ -776,7 +482,7 @@
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <path
-                id="g-svg-98"
+                id="g-svg-73"
                 fill="none"
                 d="M 0,448 L 38.777,359.491 L 77.554,213.094 L 116.331,167.79 L 232.663,172.824 L 310.217,186.667 L 348.994,148.075 L 387.771,147.655 L 426.549,130.457 L 542.88,0"
                 stroke-linecap="round"
diff --git a/__tests__/integration/snapshots/api/chart-render-update-attributes/step1.svg b/__tests__/integration/snapshots/api/chart-render-update-attributes/step1.svg
index ee8faaa9ed..b31fbffa11 100644
--- a/__tests__/integration/snapshots/api/chart-render-update-attributes/step1.svg
+++ b/__tests__/integration/snapshots/api/chart-render-update-attributes/step1.svg
@@ -190,7 +190,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-116"
+                      id="g-svg-81"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -211,7 +211,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-117"
+                      id="g-svg-82"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -232,7 +232,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-118"
+                      id="g-svg-83"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -253,7 +253,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-119"
+                      id="g-svg-84"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -274,7 +274,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-120"
+                      id="g-svg-85"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -302,7 +302,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-121"
+                      id="g-svg-86"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -330,7 +330,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-122"
+                      id="g-svg-87"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -358,7 +358,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-123"
+                      id="g-svg-88"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -386,7 +386,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-124"
+                      id="g-svg-89"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -414,7 +414,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-125"
+                      id="g-svg-90"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -463,300 +463,6 @@
                 </text>
               </g>
             </g>
-            <g
-              id="g-svg-62"
-              fill="none"
-              class="offscreen"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-63"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,81.120003,16)">
-                  <line
-                    id="g-svg-64"
-                    fill="none"
-                    x1="0"
-                    y1="448"
-                    x2="0"
-                    y2="0"
-                    visibility="hidden"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-65"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-66"
-                  fill="none"
-                  transform="matrix(1,0,0,1,81.120003,432.119843)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-106"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-67"
-                  fill="none"
-                  transform="matrix(1,0,0,1,81.120003,348.224731)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-107"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-68"
-                  fill="none"
-                  transform="matrix(1,0,0,1,81.120003,264.329590)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-108"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-69"
-                  fill="none"
-                  transform="matrix(1,0,0,1,81.120003,180.434464)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-109"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-70"
-                  fill="none"
-                  transform="matrix(1,0,0,1,81.120003,96.539330)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-110"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-76"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-77"
-                  fill="none"
-                  transform="matrix(1,0,0,1,73.120003,432.119843)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-111"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      94
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-78"
-                  fill="none"
-                  transform="matrix(1,0,0,1,73.120003,348.224731)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-112"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      96
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-79"
-                  fill="none"
-                  transform="matrix(1,0,0,1,73.120003,264.329590)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-113"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      98
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-80"
-                  fill="none"
-                  transform="matrix(1,0,0,1,73.120003,180.434464)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-114"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      100
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-81"
-                  fill="none"
-                  transform="matrix(1,0,0,1,73.120003,96.539330)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-115"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      102
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
           </g>
         </g>
         <g transform="matrix(1,0,0,1,81.120003,16)">
@@ -776,7 +482,7 @@
           >
             <g transform="matrix(1,0,0,1,0,0)">
               <path
-                id="g-svg-127"
+                id="g-svg-92"
                 fill="none"
                 d="M 0,448 L 38.777,359.491 L 77.554,213.094 L 116.331,167.79 L 232.663,172.824 L 310.217,186.667 L 348.994,148.075 L 387.771,147.655 L 426.549,130.457 L 542.88,0"
                 stroke-linecap="round"
diff --git a/__tests__/integration/snapshots/api/chartChangeDataLegend.svg b/__tests__/integration/snapshots/api/chartChangeDataLegend.svg
index 1e5980f3b5..d6c6487579 100644
--- a/__tests__/integration/snapshots/api/chartChangeDataLegend.svg
+++ b/__tests__/integration/snapshots/api/chartChangeDataLegend.svg
@@ -369,7 +369,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-215"
+                      id="g-svg-194"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -390,7 +390,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-216"
+                      id="g-svg-195"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -411,7 +411,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-217"
+                      id="g-svg-196"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -432,7 +432,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-218"
+                      id="g-svg-197"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -460,7 +460,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-219"
+                      id="g-svg-198"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -489,7 +489,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-220"
+                      id="g-svg-199"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -518,7 +518,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-221"
+                      id="g-svg-200"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -547,7 +547,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-222"
+                      id="g-svg-201"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -598,254 +598,6 @@
                 </text>
               </g>
             </g>
-            <g
-              id="g-svg-194"
-              fill="none"
-              class="offscreen"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-195"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,67.919998,398)">
-                  <line
-                    id="g-svg-196"
-                    fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="556.0799993277515"
-                    y2="0"
-                    visibility="hidden"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-197"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-198"
-                  fill="none"
-                  transform="matrix(1,0,0,1,142.516098,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-202"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-199"
-                  fill="none"
-                  transform="matrix(1,0,0,1,278.145355,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-203"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-200"
-                  fill="none"
-                  transform="matrix(1,0,0,1,413.774628,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-204"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-201"
-                  fill="none"
-                  transform="matrix(1,0,0,1,549.403931,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-205"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-206"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-207"
-                  fill="none"
-                  transform="matrix(1,0,0,1,142.516098,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-211"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                    >
-                      10:10
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-208"
-                  fill="none"
-                  transform="matrix(1,0,0,1,278.145355,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-212"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                    >
-                      10:20
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-209"
-                  fill="none"
-                  transform="matrix(1,0,0,1,413.774628,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-213"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                    >
-                      10:30
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-210"
-                  fill="none"
-                  transform="matrix(1,0,0,1,549.403931,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-214"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                    >
-                      10:40
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
           </g>
         </g>
         <g
@@ -989,7 +741,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-250"
+                      id="g-svg-204"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -1010,7 +762,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-251"
+                      id="g-svg-205"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -1031,7 +783,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-252"
+                      id="g-svg-206"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -1052,7 +804,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-253"
+                      id="g-svg-207"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -1073,7 +825,7 @@
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-254"
+                      id="g-svg-208"
                       fill="none"
                       x1="4"
                       y1="0"
@@ -1101,7 +853,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-255"
+                      id="g-svg-209"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1129,7 +881,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-256"
+                      id="g-svg-210"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1157,7 +909,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-257"
+                      id="g-svg-211"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1185,7 +937,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-258"
+                      id="g-svg-212"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1213,7 +965,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-259"
+                      id="g-svg-213"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1262,300 +1014,6 @@
                 </text>
               </g>
             </g>
-            <g
-              id="g-svg-225"
-              fill="none"
-              class="offscreen"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-226"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,67.919998,51)">
-                  <line
-                    id="g-svg-227"
-                    fill="none"
-                    x1="0"
-                    y1="347"
-                    x2="0"
-                    y2="0"
-                    visibility="hidden"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-228"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-229"
-                  fill="none"
-                  transform="matrix(1,0,0,1,67.919998,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-234"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-230"
-                  fill="none"
-                  transform="matrix(1,0,0,1,67.919998,320.888885)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-235"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-231"
-                  fill="none"
-                  transform="matrix(1,0,0,1,67.919998,243.777771)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-236"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-232"
-                  fill="none"
-                  transform="matrix(1,0,0,1,67.919998,166.666672)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-237"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-233"
-                  fill="none"
-                  transform="matrix(1,0,0,1,67.919998,89.555557)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-238"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-239"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-240"
-                  fill="none"
-                  transform="matrix(1,0,0,1,59.920002,398)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-245"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      0
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-241"
-                  fill="none"
-                  transform="matrix(1,0,0,1,59.920002,320.888885)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-246"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      2
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-242"
-                  fill="none"
-                  transform="matrix(1,0,0,1,59.920002,243.777771)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-247"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      4
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-243"
-                  fill="none"
-                  transform="matrix(1,0,0,1,59.920002,166.666672)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-248"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      6
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-244"
-                  fill="none"
-                  transform="matrix(1,0,0,1,59.920002,89.555557)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-249"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      opacity="0.45"
-                    >
-                      8
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
           </g>
         </g>
         <g transform="matrix(1,0,0,1,67.919998,51)">
@@ -1575,7 +1033,7 @@
           >
             <g transform="matrix(1,0,0,1,77.502441,269.888885)">
               <path
-                id="g-svg-265"
+                id="g-svg-219"
                 fill="rgba(0,201,201,1)"
                 d="M 0,0 l 52.31414627822052,0 l 0,77.11111111111109 l-52.31414627822052 0 z"
                 width="52.31414627822052"
@@ -1588,7 +1046,7 @@
             </g>
             <g transform="matrix(1,0,0,1,19.375610,115.666664)">
               <path
-                id="g-svg-261"
+                id="g-svg-215"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 52.31414627822053,0 l 0,231.33333333333331 l-52.31414627822053 0 z"
                 width="52.31414627822053"
@@ -1601,7 +1059,7 @@
             </g>
             <g transform="matrix(1,0,0,1,213.131714,269.888885)">
               <path
-                id="g-svg-266"
+                id="g-svg-220"
                 fill="rgba(0,201,201,1)"
                 d="M 0,0 l 52.314146278220534,0 l 0,77.11111111111109 l-52.314146278220534 0 z"
                 width="52.314146278220534"
@@ -1614,7 +1072,7 @@
             </g>
             <g transform="matrix(1,0,0,1,155.004883,0)">
               <path
-                id="g-svg-262"
+                id="g-svg-216"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 52.314146278220534,0 l 0,347 l-52.314146278220534 0 z"
                 width="52.314146278220534"
@@ -1627,7 +1085,7 @@
             </g>
             <g transform="matrix(1,0,0,1,348.760986,269.888885)">
               <path
-                id="g-svg-267"
+                id="g-svg-221"
                 fill="rgba(0,201,201,1)"
                 d="M 0,0 l 52.314146278220505,0 l 0,77.11111111111109 l-52.314146278220505 0 z"
                 width="52.314146278220505"
@@ -1640,7 +1098,7 @@
             </g>
             <g transform="matrix(1,0,0,1,290.634155,154.222229)">
               <path
-                id="g-svg-263"
+                id="g-svg-217"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 52.31414627822056,0 l 0,192.7777777777778 l-52.31414627822056 0 z"
                 width="52.31414627822056"
@@ -1653,7 +1111,7 @@
             </g>
             <g transform="matrix(1,0,0,1,484.390228,308.444458)">
               <path
-                id="g-svg-268"
+                id="g-svg-222"
                 fill="rgba(0,201,201,1)"
                 d="M 0,0 l 52.31414627822056,0 l 0,38.5555555555556 l-52.31414627822056 0 z"
                 width="52.31414627822056"
@@ -1666,7 +1124,7 @@
             </g>
             <g transform="matrix(1,0,0,1,426.263428,231.333328)">
               <path
-                id="g-svg-264"
+                id="g-svg-218"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 52.314146278220505,0 l 0,115.66666666666663 l-52.314146278220505 0 z"
                 width="52.314146278220505"
diff --git a/__tests__/integration/snapshots/api/markChangeData.svg b/__tests__/integration/snapshots/api/markChangeData.svg
index a0cb72b8c0..27def8d563 100644
--- a/__tests__/integration/snapshots/api/markChangeData.svg
+++ b/__tests__/integration/snapshots/api/markChangeData.svg
@@ -603,7 +603,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-251"
+                      id="g-svg-226"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -624,7 +624,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-252"
+                      id="g-svg-227"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -645,7 +645,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-253"
+                      id="g-svg-228"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -666,7 +666,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-254"
+                      id="g-svg-229"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -687,7 +687,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <line
-                      id="g-svg-255"
+                      id="g-svg-230"
                       fill="none"
                       x1="0"
                       y1="0"
@@ -715,123 +715,7 @@
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-256"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      Action
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-109"
-                  fill="none"
-                  transform="matrix(1,0,0,1,247.449417,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-257"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      Shooter
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-110"
-                  fill="none"
-                  transform="matrix(1,0,0,1,353.519989,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-258"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      Other
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-111"
-                  fill="none"
-                  transform="matrix(1,0,0,1,459.590576,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-259"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      Sports
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-112"
-                  fill="none"
-                  transform="matrix(1,0,0,1,565.661194,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-260"
+                      id="g-svg-231"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -842,812 +726,25 @@
                       font-variant="normal"
                       font-weight="normal"
                       stroke-width="1"
-                      text-anchor="middle"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      Strategy
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
-            <g
-              id="g-svg-118"
-              fill="none"
-              transform="matrix(1,0,0,1,353.519989,464)"
-              class="axis-title-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
-                <text
-                  id="g-svg-119"
-                  fill="rgba(29,33,41,1)"
-                  dominant-baseline="central"
-                  paint-order="stroke"
-                  dx="0.5"
-                  font-family="sans-serif"
-                  font-size="12"
-                  font-style="normal"
-                  font-variant="normal"
-                  font-weight="normal"
-                  stroke-width="1"
-                  text-anchor="middle"
-                  class="axis-title"
-                  dy="-11.5px"
-                  opacity="0.9"
-                >
-                  genre
-                </text>
-              </g>
-            </g>
-            <g
-              id="g-svg-226"
-              fill="none"
-              class="offscreen"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-227"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,83.040001,398)">
-                  <line
-                    id="g-svg-228"
-                    fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="540.9599999192206"
-                    y2="0"
-                    visibility="hidden"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-229"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-230"
-                  fill="none"
-                  transform="matrix(1,0,0,1,141.378830,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-235"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-231"
-                  fill="none"
-                  transform="matrix(1,0,0,1,247.449417,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-236"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-232"
-                  fill="none"
-                  transform="matrix(1,0,0,1,353.519989,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-237"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-233"
-                  fill="none"
-                  transform="matrix(1,0,0,1,459.590576,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-238"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-234"
-                  fill="none"
-                  transform="matrix(1,0,0,1,565.661194,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <line
-                      id="g-svg-239"
-                      fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="4"
-                      visibility="hidden"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-240"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-241"
-                  fill="none"
-                  transform="matrix(1,0,0,1,141.378830,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-246"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                    >
-                      Action
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-242"
-                  fill="none"
-                  transform="matrix(1,0,0,1,247.449417,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-247"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                    >
-                      Shooter
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-243"
-                  fill="none"
-                  transform="matrix(1,0,0,1,353.519989,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-248"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                    >
-                      Other
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-244"
-                  fill="none"
-                  transform="matrix(1,0,0,1,459.590576,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-249"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                    >
-                      Sports
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-245"
-                  fill="none"
-                  transform="matrix(1,0,0,1,565.661194,406)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-250"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="middle"
-                      visibility="hidden"
-                      class="axis-label-item"
-                      dy="11.5px"
-                      opacity="0.45"
-                    >
-                      Strategy
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
-          </g>
-        </g>
-        <g
-          id="g-svg-28"
-          fill="none"
-          transform="matrix(1,0,0,1,0,0)"
-          class="component"
-        >
-          <g
-            id="g-svg-121"
-            fill="none"
-            class="axis"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-122"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-123"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-124"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,83.040001,398)">
-                    <path
-                      id="g-svg-126"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 540.9599999192206,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,83.040001,348.428558)">
-                    <path
-                      id="g-svg-127"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 540.9599999192206,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,83.040001,298.857147)">
-                    <path
-                      id="g-svg-128"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 540.9599999192206,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,83.040001,249.285721)">
-                    <path
-                      id="g-svg-129"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 540.9599999192206,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,83.040001,199.714279)">
-                    <path
-                      id="g-svg-130"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 540.9599999192206,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,83.040001,150.142853)">
-                    <path
-                      id="g-svg-131"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 540.9599999192206,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,83.040001,100.571426)">
-                    <path
-                      id="g-svg-132"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 540.9599999192206,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,83.040001,51)">
-                    <path
-                      id="g-svg-133"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(29,33,41,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="3,4"
-                      d="M 0,0 L 540.9599999192206,0"
-                      stroke-opacity="0.1"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-125"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
-              </g>
-            </g>
-            <g
-              id="g-svg-134"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-135"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,83.040001,51)">
-                  <line
-                    id="g-svg-136"
-                    fill="none"
-                    x1="0"
-                    y1="347"
-                    x2="0"
-                    y2="0"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(29,33,41,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-137"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
-                <g
-                  id="g-svg-138"
-                  fill="none"
-                  transform="matrix(1,0,0,1,83.040001,398)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-300"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-139"
-                  fill="none"
-                  transform="matrix(1,0,0,1,83.040001,348.428558)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-301"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-140"
-                  fill="none"
-                  transform="matrix(1,0,0,1,83.040001,298.857147)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-302"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-141"
-                  fill="none"
-                  transform="matrix(1,0,0,1,83.040001,249.285721)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-303"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-142"
-                  fill="none"
-                  transform="matrix(1,0,0,1,83.040001,199.714279)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-304"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-143"
-                  fill="none"
-                  transform="matrix(1,0,0,1,83.040001,150.142853)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-305"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-144"
-                  fill="none"
-                  transform="matrix(1,0,0,1,83.040001,100.571426)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-306"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-145"
-                  fill="none"
-                  transform="matrix(1,0,0,1,83.040001,51)"
-                  class="axis-tick"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-307"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(29,33,41,1)"
-                      opacity="0.45"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-154"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
-                <g
-                  id="g-svg-155"
-                  fill="none"
-                  transform="matrix(1,0,0,1,75.040001,398)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-308"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      0
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-156"
-                  fill="none"
-                  transform="matrix(1,0,0,1,75.040001,348.428558)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-309"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      50
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-157"
-                  fill="none"
-                  transform="matrix(1,0,0,1,75.040001,298.857147)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-310"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      opacity="0.45"
-                      visibility="visible"
-                    >
-                      100
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-158"
-                  fill="none"
-                  transform="matrix(1,0,0,1,75.040001,249.285721)"
-                  class="axis-label"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-311"
-                      fill="rgba(29,33,41,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="normal"
-                      stroke-width="1"
-                      text-anchor="end"
+                      text-anchor="middle"
                       class="axis-label-item"
+                      dy="11.5px"
                       opacity="0.45"
                       visibility="visible"
                     >
-                      150
+                      Action
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-159"
+                  id="g-svg-109"
                   fill="none"
-                  transform="matrix(1,0,0,1,75.040001,199.714279)"
+                  transform="matrix(1,0,0,1,247.449417,406)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-312"
+                      id="g-svg-232"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1658,24 +755,25 @@
                       font-variant="normal"
                       font-weight="normal"
                       stroke-width="1"
-                      text-anchor="end"
+                      text-anchor="middle"
                       class="axis-label-item"
+                      dy="11.5px"
                       opacity="0.45"
                       visibility="visible"
                     >
-                      200
+                      Shooter
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-160"
+                  id="g-svg-110"
                   fill="none"
-                  transform="matrix(1,0,0,1,75.040001,150.142853)"
+                  transform="matrix(1,0,0,1,353.519989,406)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-313"
+                      id="g-svg-233"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1686,24 +784,25 @@
                       font-variant="normal"
                       font-weight="normal"
                       stroke-width="1"
-                      text-anchor="end"
+                      text-anchor="middle"
                       class="axis-label-item"
+                      dy="11.5px"
                       opacity="0.45"
                       visibility="visible"
                     >
-                      250
+                      Other
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-161"
+                  id="g-svg-111"
                   fill="none"
-                  transform="matrix(1,0,0,1,75.040001,100.571426)"
+                  transform="matrix(1,0,0,1,459.590576,406)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-314"
+                      id="g-svg-234"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1714,24 +813,25 @@
                       font-variant="normal"
                       font-weight="normal"
                       stroke-width="1"
-                      text-anchor="end"
+                      text-anchor="middle"
                       class="axis-label-item"
+                      dy="11.5px"
                       opacity="0.45"
                       visibility="visible"
                     >
-                      300
+                      Sports
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-162"
+                  id="g-svg-112"
                   fill="none"
-                  transform="matrix(1,0,0,1,75.040001,51)"
+                  transform="matrix(1,0,0,1,565.661194,406)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-315"
+                      id="g-svg-235"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -1742,26 +842,27 @@
                       font-variant="normal"
                       font-weight="normal"
                       stroke-width="1"
-                      text-anchor="end"
+                      text-anchor="middle"
                       class="axis-label-item"
+                      dy="11.5px"
                       opacity="0.45"
                       visibility="visible"
                     >
-                      350
+                      Strategy
                     </text>
                   </g>
                 </g>
               </g>
             </g>
             <g
-              id="g-svg-171"
+              id="g-svg-118"
               fill="none"
-              transform="matrix(1,0,0,1,17,224.500000)"
+              transform="matrix(1,0,0,1,353.519989,464)"
               class="axis-title-group"
             >
-              <g transform="matrix(0,-1,1,0,11.500000,0)">
+              <g transform="matrix(1,0,0,1,0,0)">
                 <text
-                  id="g-svg-172"
+                  id="g-svg-119"
                   fill="rgba(29,33,41,1)"
                   dominant-baseline="central"
                   paint-order="stroke"
@@ -1774,33 +875,170 @@
                   stroke-width="1"
                   text-anchor="middle"
                   class="axis-title"
+                  dy="-11.5px"
                   opacity="0.9"
                 >
-                  sold
+                  genre
                 </text>
               </g>
             </g>
+          </g>
+        </g>
+        <g
+          id="g-svg-28"
+          fill="none"
+          transform="matrix(1,0,0,1,0,0)"
+          class="component"
+        >
+          <g
+            id="g-svg-121"
+            fill="none"
+            class="axis"
+            transform="matrix(1,0,0,1,0,0)"
+          >
+            <g
+              id="g-svg-122"
+              fill="none"
+              transform="matrix(1,0,0,1,0,0)"
+              class="axis-grid-group"
+            >
+              <g
+                id="g-svg-123"
+                fill="none"
+                transform="matrix(1,0,0,1,0,0)"
+                class="axis-grid"
+              >
+                <g
+                  id="g-svg-124"
+                  fill="none"
+                  transform="matrix(1,0,0,1,0,0)"
+                  class="grid-line-group"
+                >
+                  <g transform="matrix(1,0,0,1,83.040001,398)">
+                    <path
+                      id="g-svg-126"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 540.9599999192206,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,83.040001,348.428558)">
+                    <path
+                      id="g-svg-127"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 540.9599999192206,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,83.040001,298.857147)">
+                    <path
+                      id="g-svg-128"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 540.9599999192206,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,83.040001,249.285721)">
+                    <path
+                      id="g-svg-129"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 540.9599999192206,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,83.040001,199.714279)">
+                    <path
+                      id="g-svg-130"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 540.9599999192206,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,83.040001,150.142853)">
+                    <path
+                      id="g-svg-131"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 540.9599999192206,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,83.040001,100.571426)">
+                    <path
+                      id="g-svg-132"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 540.9599999192206,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                  <g transform="matrix(1,0,0,1,83.040001,51)">
+                    <path
+                      id="g-svg-133"
+                      fill="none"
+                      class="grid-line"
+                      stroke="rgba(29,33,41,1)"
+                      stroke-width="0.5"
+                      stroke-dasharray="3,4"
+                      d="M 0,0 L 540.9599999192206,0"
+                      stroke-opacity="0.1"
+                    />
+                  </g>
+                </g>
+                <g
+                  id="g-svg-125"
+                  fill="none"
+                  transform="matrix(1,0,0,1,0,0)"
+                  class="grid-region-group"
+                />
+              </g>
+            </g>
             <g
-              id="g-svg-263"
+              id="g-svg-134"
               fill="none"
-              class="offscreen"
               transform="matrix(1,0,0,1,0,0)"
+              class="axis-main-group"
             >
               <g
-                id="g-svg-264"
+                id="g-svg-135"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-line-group"
               >
                 <g transform="matrix(1,0,0,1,83.040001,51)">
                   <line
-                    id="g-svg-265"
+                    id="g-svg-136"
                     fill="none"
                     x1="0"
                     y1="347"
                     x2="0"
                     y2="0"
-                    visibility="hidden"
                     class="axis-line axis-line"
                     stroke-width="0.5"
                     stroke="rgba(29,33,41,1)"
@@ -1810,26 +1048,25 @@
                 </g>
               </g>
               <g
-                id="g-svg-266"
+                id="g-svg-137"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-tick-group"
               >
                 <g
-                  id="g-svg-267"
+                  id="g-svg-138"
                   fill="none"
                   transform="matrix(1,0,0,1,83.040001,398)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-275"
+                      id="g-svg-238"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1838,20 +1075,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-268"
+                  id="g-svg-139"
                   fill="none"
                   transform="matrix(1,0,0,1,83.040001,348.428558)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-276"
+                      id="g-svg-239"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1860,20 +1096,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-269"
+                  id="g-svg-140"
                   fill="none"
                   transform="matrix(1,0,0,1,83.040001,298.857147)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-277"
+                      id="g-svg-240"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1882,20 +1117,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-270"
+                  id="g-svg-141"
                   fill="none"
                   transform="matrix(1,0,0,1,83.040001,249.285721)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-278"
+                      id="g-svg-241"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1904,20 +1138,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-271"
+                  id="g-svg-142"
                   fill="none"
                   transform="matrix(1,0,0,1,83.040001,199.714279)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-279"
+                      id="g-svg-242"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1926,20 +1159,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-272"
+                  id="g-svg-143"
                   fill="none"
                   transform="matrix(1,0,0,1,83.040001,150.142853)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-280"
+                      id="g-svg-243"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1948,20 +1180,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-273"
+                  id="g-svg-144"
                   fill="none"
                   transform="matrix(1,0,0,1,83.040001,100.571426)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-281"
+                      id="g-svg-244"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1970,20 +1201,19 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-274"
+                  id="g-svg-145"
                   fill="none"
                   transform="matrix(1,0,0,1,83.040001,51)"
                   class="axis-tick"
                 >
                   <g transform="matrix(1,0,0,1,-4,0)">
                     <line
-                      id="g-svg-282"
+                      id="g-svg-245"
                       fill="none"
                       x1="4"
                       y1="0"
                       x2="0"
                       y2="0"
-                      visibility="hidden"
                       class="axis-tick-item"
                       stroke-width="1"
                       stroke="rgba(29,33,41,1)"
@@ -1993,20 +1223,20 @@
                 </g>
               </g>
               <g
-                id="g-svg-283"
+                id="g-svg-154"
                 fill="none"
                 transform="matrix(1,0,0,1,0,0)"
                 class="axis-label-group"
               >
                 <g
-                  id="g-svg-284"
+                  id="g-svg-155"
                   fill="none"
                   transform="matrix(1,0,0,1,75.040001,398)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-292"
+                      id="g-svg-246"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2018,23 +1248,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       0
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-285"
+                  id="g-svg-156"
                   fill="none"
                   transform="matrix(1,0,0,1,75.040001,348.428558)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-293"
+                      id="g-svg-247"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2046,23 +1276,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       50
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-286"
+                  id="g-svg-157"
                   fill="none"
                   transform="matrix(1,0,0,1,75.040001,298.857147)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-294"
+                      id="g-svg-248"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2074,23 +1304,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       100
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-287"
+                  id="g-svg-158"
                   fill="none"
                   transform="matrix(1,0,0,1,75.040001,249.285721)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-295"
+                      id="g-svg-249"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2102,23 +1332,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       150
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-288"
+                  id="g-svg-159"
                   fill="none"
                   transform="matrix(1,0,0,1,75.040001,199.714279)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-296"
+                      id="g-svg-250"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2130,23 +1360,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       200
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-289"
+                  id="g-svg-160"
                   fill="none"
                   transform="matrix(1,0,0,1,75.040001,150.142853)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-297"
+                      id="g-svg-251"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2158,23 +1388,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       250
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-290"
+                  id="g-svg-161"
                   fill="none"
                   transform="matrix(1,0,0,1,75.040001,100.571426)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-298"
+                      id="g-svg-252"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2186,23 +1416,23 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       300
                     </text>
                   </g>
                 </g>
                 <g
-                  id="g-svg-291"
+                  id="g-svg-162"
                   fill="none"
                   transform="matrix(1,0,0,1,75.040001,51)"
                   class="axis-label"
                 >
                   <g transform="matrix(1,0,0,1,0,0)">
                     <text
-                      id="g-svg-299"
+                      id="g-svg-253"
                       fill="rgba(29,33,41,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -2214,9 +1444,9 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="end"
-                      visibility="hidden"
                       class="axis-label-item"
                       opacity="0.45"
+                      visibility="visible"
                     >
                       350
                     </text>
@@ -2224,6 +1454,33 @@
                 </g>
               </g>
             </g>
+            <g
+              id="g-svg-171"
+              fill="none"
+              transform="matrix(1,0,0,1,17,224.500000)"
+              class="axis-title-group"
+            >
+              <g transform="matrix(0,-1,1,0,11.500000,0)">
+                <text
+                  id="g-svg-172"
+                  fill="rgba(29,33,41,1)"
+                  dominant-baseline="central"
+                  paint-order="stroke"
+                  dx="0.5"
+                  font-family="sans-serif"
+                  font-size="12"
+                  font-style="normal"
+                  font-variant="normal"
+                  font-weight="normal"
+                  stroke-width="1"
+                  text-anchor="middle"
+                  class="axis-title"
+                  opacity="0.9"
+                >
+                  sold
+                </text>
+              </g>
+            </g>
           </g>
         </g>
         <g transform="matrix(1,0,0,1,83.040001,51)">
@@ -2243,7 +1500,7 @@
           >
             <g transform="matrix(1,0,0,1,328.818817,74.357140)">
               <path
-                id="g-svg-320"
+                id="g-svg-258"
                 fill="rgba(213,128,255,1)"
                 d="M 0,0 l 95.46352939750949,0 l 0,272.6428571428571 l-95.46352939750949 0 z"
                 width="95.46352939750949"
@@ -2256,7 +1513,7 @@
             </g>
             <g transform="matrix(1,0,0,1,434.889404,232.985718)">
               <path
-                id="g-svg-321"
+                id="g-svg-259"
                 fill="rgba(120,99,255,1)"
                 d="M 0,0 l 95.46352939750955,0 l 0,114.0142857142857 l-95.46352939750955 0 z"
                 width="95.46352939750955"
@@ -2269,7 +1526,7 @@
             </g>
             <g transform="matrix(1,0,0,1,10.607059,228.028564)">
               <path
-                id="g-svg-317"
+                id="g-svg-255"
                 fill="rgba(23,131,255,1)"
                 d="M 0,0 l 95.46352939750952,0 l 0,118.97142857142856 l-95.46352939750952 0 z"
                 width="95.46352939750952"
@@ -2282,7 +1539,7 @@
             </g>
             <g transform="matrix(1,0,0,1,116.677650,0)">
               <path
-                id="g-svg-318"
+                id="g-svg-256"
                 fill="rgba(0,201,201,1)"
                 d="M 0,0 l 95.46352939750953,0 l 0,347 l-95.46352939750953 0 z"
                 width="95.46352939750953"
@@ -2295,7 +1552,7 @@
             </g>
             <g transform="matrix(1,0,0,1,222.748230,198.285721)">
               <path
-                id="g-svg-319"
+                id="g-svg-257"
                 fill="rgba(240,136,77,1)"
                 d="M 0,0 l 95.46352939750949,0 l 0,148.71428571428572 l-95.46352939750949 0 z"
                 width="95.46352939750949"
diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts
index 0a75397573..e7edabdc03 100644
--- a/src/runtime/plot.ts
+++ b/src/runtime/plot.ts
@@ -938,7 +938,7 @@ async function plotView(
           );
           const { attributes } = newComponent;
           const [node] = element.childNodes;
-          return node.update(attributes);
+          return node.update(attributes, false);
         }),
     )
     .transitions();