diff --git a/__tests__/integration/api-chart-emit-series-tooltip.spec.ts b/__tests__/integration/api-chart-emit-series-tooltip.spec.ts
index 4231aa214e..2637954ab3 100644
--- a/__tests__/integration/api-chart-emit-series-tooltip.spec.ts
+++ b/__tests__/integration/api-chart-emit-series-tooltip.spec.ts
@@ -39,7 +39,7 @@ describe('chart.emit', () => {
     const [tooltipShowed, resolveShow] = createPromise();
     chart.on('tooltip:show', (event) => {
       const { x } = event.data.data;
-      expect(x.toUTCString()).toBe('Sat, 23 Jun 2007 12:58:35 GMT');
+      expect(x.toUTCString()).toBe('Mon, 18 Jun 2007 17:47:35 GMT');
       resolveShow();
     });
     dispatchPlotEvent(canvas, 'pointermove', {
diff --git a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
index 68fd3548d8..83a5092c55 100644
--- a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
+++ b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
@@ -1,13 +1,13 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
   class="g2-tooltip"
-  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.8211855528594px; top: 215.5857864376269px;"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.82118555285933px; top: 215.5857864376269px;"
 >
   <div
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    Tue, 16 Nov 2010 00:00:00 GMT
+    Thu, 11 Nov 2010 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="300.5"
+        title="308.03"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        300.5
+        308.03
       </span>
     </li>
   </ul>
diff --git a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
index 4cff9d7d07..93ba512e4f 100644
--- a/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
+++ b/__tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
@@ -1,13 +1,13 @@
 <div
   xmlns="http://www.w3.org/1999/xhtml"
   class="g2-tooltip"
-  style="pointer-events: none; position: absolute; visibility: hidden; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.8211855528594px; top: 215.5857864376269px;"
+  style="pointer-events: none; position: absolute; visibility: hidden; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 475.82118555285933px; top: 215.5857864376269px;"
 >
   <div
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    Tue, 16 Nov 2010 00:00:00 GMT
+    Thu, 11 Nov 2010 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="300.5"
+        title="308.03"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        300.5
+        308.03
       </span>
     </li>
   </ul>
diff --git a/__tests__/integration/snapshots/interaction/gdp2-point-fisheye/step0.svg b/__tests__/integration/snapshots/interaction/gdp2-point-fisheye/step0.svg
index 228a6fae85..5b5c5ff8cb 100644
--- a/__tests__/integration/snapshots/interaction/gdp2-point-fisheye/step0.svg
+++ b/__tests__/integration/snapshots/interaction/gdp2-point-fisheye/step0.svg
@@ -64,11 +64,11 @@
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,177.241119,312.928558)">
+            <g transform="matrix(1,0,0,1,185.067947,328.167328)">
               <path
                 id="g-svg-9"
                 fill="rgba(23,131,255,1)"
-                d="M 0,25.546638577216356 A 25.54663790942417 25.54663790942417 0 1 0 51.093275818848326 25.546638577216356 A 25.54663790942417 25.54663790942417 0 1 0 0 25.546638577216356 Z"
+                d="M 0,23.734133636790602 A 23.734132849396175 23.734132849396175 0 1 0 47.46826569879232 23.734133636790602 A 23.734132849396175 23.734132849396175 0 1 0 0 23.734133636790602 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -76,11 +76,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,81.932159,386.796143)">
+            <g transform="matrix(1,0,0,1,84.520569,392.082428)">
               <path
                 id="g-svg-10"
                 fill="rgba(23,131,255,1)"
-                d="M 0,14.964993934976121 A 14.96499345808683 14.96499345808683 0 1 0 29.929986916173647 14.964993934976121 A 14.96499345808683 14.96499345808683 0 1 0 0 14.964993934976121 Z"
+                d="M 0,13.738203902069074 A 13.738203561993277 13.738203561993277 0 1 0 27.476407123986547 13.738203902069074 A 13.738203561993277 13.738203561993277 0 1 0 0 13.738203902069074 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -88,11 +88,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,560.696960,45.182343)">
+            <g transform="matrix(1,0,0,1,562.472229,45.996529)">
               <path
                 id="g-svg-11"
                 fill="rgba(23,131,255,1)"
-                d="M 0,8.456072500095367 A 8.456071947589312 8.456071947589312 0 1 0 16.912143895178588 8.456072500095367 A 8.456071947589312 8.456071947589312 0 1 0 0 8.456072500095367 Z"
+                d="M 0,8.188849976688296 A 8.188849382855913 8.188849382855913 0 1 0 16.377698765711784 8.188849976688296 A 8.188849382855913 8.188849382855913 0 1 0 0 8.188849976688296 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -100,11 +100,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,413.178741,298.431030)">
+            <g transform="matrix(1,0,0,1,437.464691,317.018341)">
               <path
                 id="g-svg-12"
                 fill="rgba(23,131,255,1)"
-                d="M 0,31.712863573386926 A 31.712862255690794 31.712862255690794 0 1 0 63.42572451138153 31.712863573386926 A 31.712862255690794 31.712862255690794 0 1 0 0 31.712863573386926 Z"
+                d="M 0,27.64952910093598 A 27.64952910093598 27.64952910093598 0 1 0 55.29905820187196 27.64952910093598 A 27.64952910093598 27.64952910093598 0 1 0 0 27.64952910093598 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -112,11 +112,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,100.840218,411.418457)">
+            <g transform="matrix(1,0,0,1,102.908173,413.074554)">
               <path
                 id="g-svg-13"
                 fill="rgba(23,131,255,1)"
-                d="M 0,10.102093711560713 A 10.102093711560695 10.102093711560695 0 1 0 20.204187423121397 10.102093711560713 A 10.102093711560695 10.102093711560695 0 1 0 0 10.102093711560713 Z"
+                d="M 0,9.813711406461891 A 9.813711406461898 9.813711406461898 0 1 0 19.62742281292381 9.813711406461891 A 9.813711406461898 9.813711406461898 0 1 0 0 9.813711406461891 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -124,11 +124,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,451.620026,380.706909)">
+            <g transform="matrix(1,0,0,1,472.203979,388.526459)">
               <path
                 id="g-svg-14"
                 fill="rgba(23,131,255,1)"
-                d="M 0,16.910261466354427 A 16.910261466354427 16.910261466354427 0 1 0 33.820522932708855 16.910261466354427 A 16.910261466354427 16.910261466354427 0 1 0 0 16.910261466354427 Z"
+                d="M 0,13.471810398033483 A 13.471810398033483 13.471810398033483 0 1 0 26.943620796066966 13.471810398033483 A 13.471810398033483 13.471810398033483 0 1 0 0 13.471810398033483 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -136,11 +136,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,394.848206,384.193817)">
+            <g transform="matrix(1,0,0,1,417.956604,388.282928)">
               <path
                 id="g-svg-15"
                 fill="rgba(23,131,255,1)"
-                d="M 0,20.854145874362416 A 20.854145874362402 20.854145874362402 0 1 0 41.70829174872483 20.854145874362416 A 20.854145874362402 20.854145874362402 0 1 0 0 20.854145874362416 Z"
+                d="M 0,20.06093020265149 A 20.060930202651477 20.060930202651477 0 1 0 40.12186040530298 20.06093020265149 A 20.060930202651477 20.060930202651477 0 1 0 0 20.06093020265149 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -148,11 +148,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,85.697395,421.631836)">
+            <g transform="matrix(1,0,0,1,87.056198,422.496399)">
               <path
                 id="g-svg-16"
                 fill="rgba(23,131,255,1)"
-                d="M 0,6.819315684717765 A 6.819315684717761 6.819315684717761 0 1 0 13.63863136943553 6.819315684717765 A 6.819315684717761 6.819315684717761 0 1 0 0 6.819315684717765 Z"
+                d="M 0,6.691620537077199 A 6.691620323300629 6.691620323300629 0 1 0 13.383240646601251 6.691620537077199 A 6.691620323300629 6.691620323300629 0 1 0 0 6.691620537077199 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -160,11 +160,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,177.031815,412.409088)">
+            <g transform="matrix(1,0,0,1,182.150024,413.603546)">
               <path
                 id="g-svg-17"
                 fill="rgba(23,131,255,1)"
-                d="M 0,10.456547891582545 A 10.456547526768283 10.456547526768283 0 1 0 20.91309505353655 10.456547891582545 A 10.456547526768283 10.456547526768283 0 1 0 0 10.456547891582545 Z"
+                d="M 0,10.458455385462685 A 10.458455385462713 10.458455385462713 0 1 0 20.916910770925426 10.458455385462685 A 10.458455385462713 10.458455385462713 0 1 0 0 10.458455385462685 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -172,11 +172,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,77.216209,424.133087)">
+            <g transform="matrix(1,0,0,1,78.320313,424.848907)">
               <path
                 id="g-svg-18"
                 fill="rgba(23,131,255,1)"
-                d="M 0,6.113341252647558 A 6.113341046280414 6.113341046280414 0 1 0 12.226682092560822 6.113341252647558 A 6.113341046280414 6.113341046280414 0 1 0 0 6.113341252647558 Z"
+                d="M 0,6.00654879998217 A 6.00654858994594 6.00654858994594 0 1 0 12.013097179891872 6.00654879998217 A 6.00654858994594 6.00654858994594 0 1 0 0 6.00654879998217 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -184,11 +184,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,41.884533,427.312683)">
+            <g transform="matrix(1,0,0,1,42.331837,427.885437)">
               <path
                 id="g-svg-19"
                 fill="rgba(23,131,255,1)"
-                d="M 0,5.775679021860412 A 5.7756790218604035 5.7756790218604035 0 1 0 11.55135804372081 5.775679021860412 A 5.7756790218604035 5.7756790218604035 0 1 0 0 5.775679021860412 Z"
+                d="M 0,5.655378164671902 A 5.655378164671923 5.655378164671923 0 1 0 11.310756329343846 5.655378164671902 A 5.655378164671923 5.655378164671923 0 1 0 0 5.655378164671902 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -196,11 +196,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,41.814564,436.099762)">
+            <g transform="matrix(1,0,0,1,42.147964,436.249878)">
               <path
                 id="g-svg-20"
                 fill="rgba(23,131,255,1)"
-                d="M 0,4.643727811041913 A 4.643727811041899 4.643727811041899 0 1 0 9.287455622083797 4.643727811041913 A 4.643727811041899 4.643727811041899 0 1 0 0 4.643727811041913 Z"
+                d="M 0,4.62041157125617 A 4.620411571256152 4.620411571256152 0 1 0 9.240823142512312 4.62041157125617 A 4.620411571256152 4.620411571256152 0 1 0 0 4.62041157125617 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -208,11 +208,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,95.351456,413.937378)">
+            <g transform="matrix(1,0,0,1,97.048615,415.559113)">
               <path
                 id="g-svg-21"
                 fill="rgba(23,131,255,1)"
-                d="M 0,6.13504890302022 A 6.135048612205715 6.135048612205715 0 1 0 12.270097224411415 6.13504890302022 A 6.135048612205715 6.135048612205715 0 1 0 0 6.13504890302022 Z"
+                d="M 0,5.91743096872267 A 5.917430968722648 5.917430968722648 0 1 0 11.83486193744531 5.91743096872267 A 5.917430968722648 5.917430968722648 0 1 0 0 5.91743096872267 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -220,11 +220,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,220.599762,324.785645)">
+            <g transform="matrix(1,0,0,1,232.514771,340.128510)">
               <path
                 id="g-svg-22"
                 fill="rgba(23,131,255,1)"
-                d="M 2.842170943040401e-14,29.214178051804538 A 29.214178051804517 29.214178051804517 0 1 0 58.428356103609076 29.214178051804538 A 29.214178051804517 29.214178051804517 0 1 0 2.842170943040401e-14 29.214178051804538 Z"
+                d="M 0,26.508783183905962 A 26.508783183905933 26.508783183905933 0 1 0 53.017566367811895 26.508783183905962 A 26.508783183905933 26.508783183905933 0 1 0 0 26.508783183905962 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -232,11 +232,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,105.650047,438.427490)">
+            <g transform="matrix(1,0,0,1,107.339241,438.394775)">
               <path
                 id="g-svg-23"
                 fill="rgba(23,131,255,1)"
-                d="M 0,5.438317176662395 A 5.438316899390678 5.438316899390678 0 1 0 10.876633798781342 5.438317176662395 A 5.438316899390678 5.438316899390678 0 1 0 0 5.438317176662395 Z"
+                d="M 0,5.525963390186234 A 5.525963390186249 5.525963390186249 0 1 0 11.051926780372497 5.525963390186234 A 5.525963390186249 5.525963390186249 0 1 0 0 5.525963390186234 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -244,11 +244,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,202.012054,384.587860)">
+            <g transform="matrix(1,0,0,1,209.233765,389.870178)">
               <path
                 id="g-svg-24"
                 fill="rgba(23,131,255,1)"
-                d="M 0,11.101918952603 A 11.101918382795176 11.101918382795176 0 1 0 22.203836765590324 11.101918952603 A 11.101918382795176 11.101918382795176 0 1 0 0 11.101918952603 Z"
+                d="M 0,10.506424401828383 A 10.506423857204837 10.506423857204837 0 1 0 21.012847714409645 10.506424401828383 A 10.506423857204837 10.506423857204837 0 1 0 0 10.506424401828383 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -256,11 +256,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,74.839409,432.712891)">
+            <g transform="matrix(1,0,0,1,75.774139,432.934906)">
               <path
                 id="g-svg-25"
                 fill="rgba(23,131,255,1)"
-                d="M 0,5.3771500382734985 A 5.377149839982511 5.377149839982511 0 1 0 10.754299679965015 5.3771500382734985 A 5.377149839982511 5.377149839982511 0 1 0 0 5.3771500382734985 Z"
+                d="M 0,5.366297199753205 A 5.366297199753177 5.366297199753177 0 1 0 10.732594399506354 5.366297199753205 A 5.366297199753177 5.366297199753177 0 1 0 0 5.366297199753205 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -268,11 +268,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,63.589935,409.838013)">
+            <g transform="matrix(1,0,0,1,64.768433,411.897278)">
               <path
                 id="g-svg-26"
                 fill="rgba(23,131,255,1)"
-                d="M 0,8.818849501620377 A 8.818849501620402 8.818849501620402 0 1 0 17.63769900324081 8.818849501620377 A 8.818849501620402 8.818849501620402 0 1 0 0 8.818849501620377 Z"
+                d="M 0,8.395872629154894 A 8.395872350921056 8.395872350921056 0 1 0 16.791744701842106 8.395872629154894 A 8.395872350921056 8.395872350921056 0 1 0 0 8.395872629154894 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -280,11 +280,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,446.454071,188.282196)">
+            <g transform="matrix(1,0,0,1,466.373444,198.544586)">
               <path
                 id="g-svg-27"
                 fill="rgba(23,131,255,1)"
-                d="M 0,18.526777180232358 A 18.526776282727063 18.526776282727063 0 1 0 37.05355256545408 18.526777180232358 A 18.526776282727063 18.526776282727063 0 1 0 0 18.526777180232358 Z"
+                d="M 0,16.516318983140593 A 16.516318983140586 16.516318983140586 0 1 0 33.032637966281186 16.516318983140593 A 16.516318983140586 16.516318983140586 0 1 0 0 16.516318983140593 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -292,11 +292,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,32.076576,220.420288)">
+            <g transform="matrix(1,0,0,1,31.766270,229.902267)">
               <path
                 id="g-svg-28"
                 fill="rgba(23,131,255,1)"
-                d="M 0,7.205102640149789 A 7.205102640149789 7.205102640149789 0 1 0 14.410205280299579 7.205102640149789 A 7.205102640149789 7.205102640149789 0 1 0 0 7.205102640149789 Z"
+                d="M 3.552713678800501e-15,7.735620350390462 A 7.735620350390466 7.735620350390466 0 1 0 15.471240700780939 7.735620350390462 A 7.735620350390466 7.735620350390466 0 1 0 3.552713678800501e-15 7.735620350390462 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -304,11 +304,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,387.319855,-3.666966)">
+            <g transform="matrix(1,0,0,1,407.124512,-3.262022)">
               <path
                 id="g-svg-29"
                 fill="rgba(23,131,255,1)"
-                d="M 0,26.603526658910027 A 26.603526658910027 26.603526658910027 0 1 0 53.207053317820055 26.603526658910027 A 26.603526658910027 26.603526658910027 0 1 0 0 26.603526658910027 Z"
+                d="M 0,26.30619810321991 A 26.3061981032199 26.3061981032199 0 1 0 52.612396206439826 26.30619810321991 A 26.3061981032199 26.3061981032199 0 1 0 0 26.30619810321991 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -316,11 +316,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,246.697571,370.395477)">
+            <g transform="matrix(1,0,0,1,257.528625,378.092834)">
               <path
                 id="g-svg-30"
                 fill="rgba(23,131,255,1)"
-                d="M 0,13.828237410901522 A 13.828236763945725 13.828236763945725 0 1 0 27.65647352789142 13.828237410901522 A 13.828236763945725 13.828236763945725 0 1 0 0 13.828237410901522 Z"
+                d="M 0,12.96985980776958 A 12.969859201425336 12.969859201425336 0 1 0 25.939718402850644 12.96985980776958 A 12.969859201425336 12.969859201425336 0 1 0 0 12.96985980776958 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -328,11 +328,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,119.808945,348.543030)">
+            <g transform="matrix(1,0,0,1,125.459381,362.492371)">
               <path
                 id="g-svg-31"
                 fill="rgba(23,131,255,1)"
-                d="M 0,18.60656918211771 A 18.60656889217726 18.60656889217726 0 1 0 37.213137784354515 18.60656918211771 A 18.60656889217726 18.60656889217726 0 1 0 0 18.60656918211771 Z"
+                d="M 0,15.731527538869102 A 15.731527053894283 15.731527053894283 0 1 0 31.46305410778855 15.731527538869102 A 15.731527053894283 15.731527053894283 0 1 0 0 15.731527538869102 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -340,11 +340,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,100.507668,420.086914)">
+            <g transform="matrix(1,0,0,1,102.417801,420.704193)">
               <path
                 id="g-svg-32"
                 fill="rgba(0,201,201,1)"
-                d="M 0,12.950509924609605 A 12.950509924609616 12.950509924609616 0 1 0 25.90101984921924 12.950509924609605 A 12.950509924609616 12.950509924609616 0 1 0 0 12.950509924609605 Z"
+                d="M 0,12.920348384546287 A 12.920348089299022 12.920348089299022 0 1 0 25.840696178598037 12.920348384546287 A 12.920348089299022 12.920348089299022 0 1 0 0 12.920348384546287 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -352,11 +352,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,597.876892,32.249485)">
+            <g transform="matrix(1,0,0,1,597.911499,32.491104)">
               <path
                 id="g-svg-33"
                 fill="rgba(0,201,201,1)"
-                d="M 0,4.357857511418871 A 4.357857120710964 4.357857120710964 0 1 0 8.715714241421892 4.357857511418871 A 4.357857120710964 4.357857120710964 0 1 0 0 4.357857511418871 Z"
+                d="M 0,4.369831345135026 A 4.369831345135026 4.369831345135026 0 1 0 8.739662690270052 4.369831345135026 A 4.369831345135026 4.369831345135026 0 1 0 0 4.369831345135026 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -364,11 +364,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,599.431335,73.792450)">
+            <g transform="matrix(1,0,0,1,599.285156,74.905258)">
               <path
                 id="g-svg-34"
                 fill="rgba(0,201,201,1)"
-                d="M 0,8.232440800444806 A 8.232439866484977 8.232439866484977 0 1 0 16.464879732969848 8.232440800444806 A 8.232439866484977 8.232439866484977 0 1 0 0 8.232440800444806 Z"
+                d="M 0,8.405323626118957 A 8.405323626118907 8.405323626118907 0 1 0 16.810647252237914 8.405323626118957 A 8.405323626118907 8.405323626118907 0 1 0 0 8.405323626118957 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -376,11 +376,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-4.037280,443.560577)">
+            <g transform="matrix(1,0,0,1,-4.032635,443.593658)">
               <path
                 id="g-svg-35"
                 fill="rgba(0,201,201,1)"
-                d="M 0,4.112350793592327 A 4.112350793592317 4.112350793592317 0 1 0 8.224701587184635 4.112350793592327 A 4.112350793592317 4.112350793592317 0 1 0 0 4.112350793592327 Z"
+                d="M 0,4.1100783486793375 A 4.110078348679336 4.110078348679336 0 1 0 8.220156697358671 4.1100783486793375 A 4.110078348679336 4.110078348679336 0 1 0 0 4.1100783486793375 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -388,11 +388,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,424.786957,128.415604)">
+            <g transform="matrix(1,0,0,1,446.660797,135.736298)">
               <path
                 id="g-svg-36"
                 fill="rgba(0,201,201,1)"
-                d="M 0,26.39402526063941 A 26.39402526063938 26.39402526063938 0 1 0 52.78805052127882 26.39402526063941 A 26.39402526063938 26.39402526063938 0 1 0 0 26.39402526063941 Z"
+                d="M 0,23.682288167313402 A 23.682287609322607 23.682287609322607 0 1 0 47.3645752186452 23.682288167313402 A 23.682287609322607 23.682287609322607 0 1 0 0 23.682288167313402 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -400,11 +400,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,253.395096,419.596954)">
+            <g transform="matrix(1,0,0,1,263.193115,419.896301)">
               <path
                 id="g-svg-37"
                 fill="rgba(240,136,77,1)"
-                d="M 0,9.569916552206905 A 9.569916552206877 9.569916552206877 0 1 0 19.139833104413782 9.569916552206905 A 9.569916552206877 9.569916552206877 0 1 0 0 9.569916552206905 Z"
+                d="M 0,9.936452798538653 A 9.936452798538639 9.936452798538639 0 1 0 19.872905597077306 9.936452798538653 A 9.936452798538639 9.936452798538639 0 1 0 0 9.936452798538653 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -412,11 +412,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,530.398499,45.724903)">
+            <g transform="matrix(1,0,0,1,535.522217,46.947769)">
               <path
                 id="g-svg-38"
                 fill="rgba(240,136,77,1)"
-                d="M 0,8.863720442436843 A 8.863720138117861 8.863720138117861 0 1 0 17.72744027623571 8.863720442436843 A 8.863720138117861 8.863720138117861 0 1 0 0 8.863720442436843 Z"
+                d="M 0,8.203316426793108 A 8.203315719643145 8.203315719643145 0 1 0 16.40663143928623 8.203316426793108 A 8.203315719643145 8.203315719643145 0 1 0 0 8.203316426793108 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -424,11 +424,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,507.421448,57.196117)">
+            <g transform="matrix(1,0,0,1,515.932068,59.220512)">
               <path
                 id="g-svg-39"
                 fill="rgba(240,136,77,1)"
-                d="M 0,11.42936628270548 A 11.429365594635803 11.429365594635803 0 1 0 22.858731189271566 11.42936628270548 A 11.429365594635803 11.429365594635803 0 1 0 0 11.42936628270548 Z"
+                d="M 0,10.294948921090423 A 10.294947967352913 10.294947967352913 0 1 0 20.589895934705737 10.294948921090423 A 10.294947967352913 10.294947967352913 0 1 0 0 10.294948921090423 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -436,11 +436,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,172.402481,410.290985)">
+            <g transform="matrix(1,0,0,1,177.259689,411.909485)">
               <path
                 id="g-svg-40"
                 fill="rgba(240,136,77,1)"
-                d="M 0,8.700977410596352 A 8.700977410596337 8.700977410596337 0 1 0 17.401954821192703 8.700977410596352 A 8.700977410596337 8.700977410596337 0 1 0 0 8.700977410596352 Z"
+                d="M 0,8.608984474533543 A 8.608984124227028 8.608984124227028 0 1 0 17.217968248454042 8.608984474533543 A 8.608984124227028 8.608984124227028 0 1 0 0 8.608984474533543 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -448,11 +448,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,101.977364,370.156342)">
+            <g transform="matrix(1,0,0,1,105.422729,379.017303)">
               <path
                 id="g-svg-41"
                 fill="rgba(240,136,77,1)"
-                d="M 0,12.300818427156685 A 12.300818207870584 12.300818207870584 0 1 0 24.601636415741183 12.300818427156685 A 12.300818207870584 12.300818207870584 0 1 0 0 12.300818427156685 Z"
+                d="M 0,10.737341978100005 A 10.737341978099984 10.737341978099984 0 1 0 21.474683956199982 10.737341978100005 A 10.737341978099984 10.737341978099984 0 1 0 0 10.737341978100005 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -460,11 +460,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,206.783890,277.545959)">
+            <g transform="matrix(1,0,0,1,212.410217,292.880035)">
               <path
                 id="g-svg-42"
                 fill="rgba(240,136,77,1)"
-                d="M 0,17.29232112521322 A 17.292321125213206 17.292321125213206 0 1 0 34.58464225042644 17.29232112521322 A 17.292321125213206 17.292321125213206 0 1 0 0 17.29232112521322 Z"
+                d="M 0,19.006231037229952 A 19.00623050620718 19.00623050620718 0 1 0 38.01246101241435 19.006231037229952 A 19.00623050620718 19.00623050620718 0 1 0 0 19.006231037229952 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -472,11 +472,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,251.906769,145.149963)">
+            <g transform="matrix(1,0,0,1,261.321136,148.981400)">
               <path
                 id="g-svg-43"
                 fill="rgba(240,136,77,1)"
-                d="M 0,15.241629107401508 A 15.241628421977467 15.241628421977467 0 1 0 30.483256843954905 15.241629107401508 A 15.241628421977467 15.241628421977467 0 1 0 0 15.241629107401508 Z"
+                d="M 0,16.340078445056463 A 16.340078445056456 16.340078445056456 0 1 0 32.680156890112926 16.340078445056463 A 16.340078445056456 16.340078445056456 0 1 0 0 16.340078445056463 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -484,11 +484,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,405.757935,43.203918)">
+            <g transform="matrix(1,0,0,1,428.647003,44.220058)">
               <path
                 id="g-svg-44"
                 fill="rgba(240,136,77,1)"
-                d="M 0,16.056728864512536 A 16.05672886451253 16.05672886451253 0 1 0 32.11345772902507 16.056728864512536 A 16.05672886451253 16.05672886451253 0 1 0 0 16.056728864512536 Z"
+                d="M 0,15.702353219752581 A 15.702353219752553 15.702353219752553 0 1 0 31.404706439505162 15.702353219752581 A 15.702353219752553 15.702353219752553 0 1 0 0 15.702353219752581 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -496,11 +496,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,500.484344,60.818604)">
+            <g transform="matrix(1,0,0,1,510.240417,62.963905)">
               <path
                 id="g-svg-45"
                 fill="rgba(240,136,77,1)"
-                d="M 0,10.766050073189547 A 10.766050073189518 10.766050073189518 0 1 0 21.532100146379094 10.766050073189547 A 10.766050073189518 10.766050073189518 0 1 0 0 10.766050073189547 Z"
+                d="M 0,9.587064690917387 A 9.587064224337734 9.587064224337734 0 1 0 19.174128448675447 9.587064690917387 A 9.587064224337734 9.587064224337734 0 1 0 0 9.587064690917387 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -508,11 +508,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,558.510925,79.672401)">
+            <g transform="matrix(1,0,0,1,560.220520,81.411507)">
               <path
                 id="g-svg-46"
                 fill="rgba(240,136,77,1)"
-                d="M 0,10.618774462465012 A 10.618774462465002 10.618774462465002 0 1 0 21.237548924930024 10.618774462465012 A 10.618774462465002 10.618774462465002 0 1 0 0 10.618774462465012 Z"
+                d="M 0,10.433397275049856 A 10.433397275049828 10.433397275049828 0 1 0 20.866794550099712 10.433397275049856 A 10.433397275049828 10.433397275049828 0 1 0 0 10.433397275049856 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -520,11 +520,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,498.990814,62.128277)">
+            <g transform="matrix(1,0,0,1,508.735565,64.937737)">
               <path
                 id="g-svg-47"
                 fill="rgba(240,136,77,1)"
-                d="M 0,16.38440766601098 A 16.384407145398775 16.384407145398775 0 1 0 32.768814290797536 16.38440766601098 A 16.384407145398775 16.384407145398775 0 1 0 0 16.38440766601098 Z"
+                d="M 0,14.750409968203058 A 14.750409192353963 14.750409192353963 0 1 0 29.500818384707884 14.750409968203058 A 14.750409192353963 14.750409192353963 0 1 0 0 14.750409968203058 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -532,11 +532,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,508.616852,100.575745)">
+            <g transform="matrix(1,0,0,1,516.564514,103.967407)">
               <path
                 id="g-svg-48"
                 fill="rgba(240,136,77,1)"
-                d="M 0,12.685171077167794 A 12.685170651884057 12.685170651884057 0 1 0 25.3703413037681 12.685171077167794 A 12.685170651884057 12.685170651884057 0 1 0 0 12.685171077167794 Z"
+                d="M 0,11.731500797807698 A 11.731499795575516 11.731499795575516 0 1 0 23.462999591150947 11.731500797807698 A 11.731499795575516 11.731499795575516 0 1 0 0 11.731500797807698 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -544,11 +544,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,110.777489,214.309662)">
+            <g transform="matrix(1,0,0,1,112.003517,223.406158)">
               <path
                 id="g-svg-49"
                 fill="rgba(240,136,77,1)"
-                d="M 1.4210854715202004e-14,13.897837818771109 A 13.897837384777972 13.897837384777972 0 1 0 27.795674769555944 13.897837818771109 A 13.897837384777972 13.897837384777972 0 1 0 1.4210854715202004e-14 13.897837818771109 Z"
+                d="M 0,14.915723799914986 A 14.915723799914979 14.915723799914979 0 1 0 29.83144759982997 14.915723799914986 A 14.915723799914979 14.915723799914979 0 1 0 0 14.915723799914986 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -556,11 +556,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,592.890381,52.109657)">
+            <g transform="matrix(1,0,0,1,593.058289,52.657024)">
               <path
                 id="g-svg-50"
                 fill="rgba(240,136,77,1)"
-                d="M 0,2.0527620470123296 A 2.0527619272925257 2.0527619272925257 0 1 0 4.105523854585044 2.0527620470123296 A 2.0527619272925257 2.0527619272925257 0 1 0 0 2.0527620470123296 Z"
+                d="M 0,2.0534429904974445 A 2.053442530628155 2.053442530628155 0 1 0 4.106885061256207 2.0534429904974445 A 2.053442530628155 2.053442530628155 0 1 0 0 2.0534429904974445 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -568,11 +568,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,466.137817,20.034649)">
+            <g transform="matrix(1,0,0,1,483.205048,22.370108)">
               <path
                 id="g-svg-51"
                 fill="rgba(240,136,77,1)"
-                d="M 0,12.268402306671867 A 12.268401665659285 12.268401665659285 0 1 0 24.536803331318538 12.268402306671867 A 12.268401665659285 12.268401665659285 0 1 0 0 12.268402306671867 Z"
+                d="M 0,10.13008775447397 A 10.130087102233823 10.130087102233823 0 1 0 20.260174204467603 10.13008775447397 A 10.130087102233823 10.130087102233823 0 1 0 0 10.13008775447397 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -580,11 +580,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,554.327576,93.419533)">
+            <g transform="matrix(1,0,0,1,556.293030,95.699959)">
               <path
                 id="g-svg-52"
                 fill="rgba(240,136,77,1)"
-                d="M 0,11.456831321350833 A 11.456830634930633 11.456830634930633 0 1 0 22.913661269861223 11.456831321350833 A 11.456830634930633 11.456830634930633 0 1 0 0 11.456831321350833 Z"
+                d="M 0,11.275644971793454 A 11.275644284676467 11.275644284676467 0 1 0 22.55128856935289 11.275644971793454 A 11.275644284676467 11.275644284676467 0 1 0 0 11.275644971793454 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -592,11 +592,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,161.918411,396.858398)">
+            <g transform="matrix(1,0,0,1,166.330612,400.633026)">
               <path
                 id="g-svg-53"
                 fill="rgba(240,136,77,1)"
-                d="M 0,6.074686492866476 A 6.0746861991622225 6.0746861991622225 0 1 0 12.14937239832443 6.074686492866476 A 6.0746861991622225 6.0746861991622225 0 1 0 0 6.074686492866476 Z"
+                d="M 0,5.7467468661114935 A 5.7467468661114935 5.7467468661114935 0 1 0 11.493493732222987 5.7467468661114935 A 5.7467468661114935 5.7467468661114935 0 1 0 0 5.7467468661114935 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -604,11 +604,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,525.628967,40.835590)">
+            <g transform="matrix(1,0,0,1,531.391296,42.156433)">
               <path
                 id="g-svg-54"
                 fill="rgba(240,136,77,1)"
-                d="M 0,10.209460732782787 A 10.209460059187586 10.209460059187586 0 1 0 20.418920118375127 10.209460732782787 A 10.209460059187586 10.209460059187586 0 1 0 0 10.209460732782787 Z"
+                d="M 0,9.382281173689904 A 9.382280696926399 9.382280696926399 0 1 0 18.764561393852773 9.382281173689904 A 9.382280696926399 9.382280696926399 0 1 0 0 9.382281173689904 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -616,11 +616,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,548.762817,-5.729246)">
+            <g transform="matrix(1,0,0,1,551.905884,-5.314134)">
               <path
                 id="g-svg-55"
                 fill="rgba(240,136,77,1)"
-                d="M 0,5.783966479685664 A 5.783965908516194 5.783965908516194 0 1 0 11.567931817032331 5.783966479685664 A 5.783965908516194 5.783965908516194 0 1 0 0 5.783966479685664 Z"
+                d="M 0,5.370596050815069 A 5.370595294823996 5.370595294823996 0 1 0 10.741190589647886 5.370596050815069 A 5.370595294823996 5.370595294823996 0 1 0 0 5.370596050815069 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -628,11 +628,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,191.269058,255.249847)">
+            <g transform="matrix(1,0,0,1,195.810272,268.355408)">
               <path
                 id="g-svg-56"
                 fill="rgba(240,136,77,1)"
-                d="M 0,23.54498132390796 A 23.54498132390796 23.54498132390796 0 1 0 47.08996264781592 23.54498132390796 A 23.54498132390796 23.54498132390796 0 1 0 0 23.54498132390796 Z"
+                d="M 0,25.763786632180484 A 25.76378569573957 25.76378569573957 0 1 0 51.527571391479114 25.763786632180484 A 25.76378569573957 25.76378569573957 0 1 0 0 25.763786632180484 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -640,11 +640,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,375.492737,168.170547)">
+            <g transform="matrix(1,0,0,1,396.537964,173.242950)">
               <path
                 id="g-svg-57"
                 fill="rgba(240,136,77,1)"
-                d="M 0,21.770713367629696 A 21.77071281353063 21.77071281353063 0 1 0 43.541425627061244 21.770713367629696 A 21.77071281353063 21.77071281353063 0 1 0 0 21.770713367629696 Z"
+                d="M 0,23.65249191646535 A 23.65249191646533 23.65249191646533 0 1 0 47.3049838329307 23.65249191646535 A 23.65249191646533 23.65249191646533 0 1 0 0 23.65249191646535 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -652,11 +652,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,84.120049,364.121368)">
+            <g transform="matrix(1,0,0,1,87.645386,374.433624)">
               <path
                 id="g-svg-58"
                 fill="rgba(240,136,77,1)"
-                d="M 0,14.961219804903124 A 14.961219804903124 14.961219804903124 0 1 0 29.922439609806247 14.961219804903124 A 14.961219804903124 14.961219804903124 0 1 0 0 14.961219804903124 Z"
+                d="M 0,12.851466694715441 A 12.851466694715452 12.851466694715452 0 1 0 25.70293338943091 12.851466694715441 A 12.851466694715452 12.851466694715452 0 1 0 0 12.851466694715441 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -664,11 +664,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,135.337616,383.198883)">
+            <g transform="matrix(1,0,0,1,139.457062,389.034607)">
               <path
                 id="g-svg-59"
                 fill="rgba(240,136,77,1)"
-                d="M 0,12.055973441771243 A 12.055973441771243 12.055973441771243 0 1 0 24.111946883542487 12.055973441771243 A 12.055973441771243 12.055973441771243 0 1 0 0 12.055973441771243 Z"
+                d="M 0,11.081938327457578 A 11.081938327457607 11.081938327457607 0 1 0 22.163876654915214 11.081938327457578 A 11.081938327457607 11.081938327457607 0 1 0 0 11.081938327457578 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -676,11 +676,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,160.014847,203.940445)">
+            <g transform="matrix(1,0,0,1,163.421677,212.110123)">
               <path
                 id="g-svg-60"
                 fill="rgba(240,136,77,1)"
-                d="M 0,13.074248243898381 A 13.074248243898374 13.074248243898374 0 1 0 26.148496487796763 13.074248243898381 A 13.074248243898374 13.074248243898374 0 1 0 0 13.074248243898381 Z"
+                d="M 0,14.016342089698412 A 14.016341659374582 14.016341659374582 0 1 0 28.03268331874915 14.016342089698412 A 14.016341659374582 14.016341659374582 0 1 0 0 14.016342089698412 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -688,11 +688,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,366.508148,116.033264)">
+            <g transform="matrix(1,0,0,1,386.786591,117.933784)">
               <path
                 id="g-svg-61"
                 fill="rgba(240,136,77,1)"
-                d="M 0,13.101398055428206 A 13.101398055428199 13.101398055428199 0 1 0 26.20279611085641 13.101398055428206 A 13.101398055428199 13.101398055428199 0 1 0 0 13.101398055428206 Z"
+                d="M 0,14.366562039107293 A 14.36656203910729 14.36656203910729 0 1 0 28.733124078214587 14.366562039107293 A 14.36656203910729 14.36656203910729 0 1 0 0 14.366562039107293 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -700,11 +700,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,567.098022,92.889610)">
+            <g transform="matrix(1,0,0,1,568.105408,94.929794)">
               <path
                 id="g-svg-62"
                 fill="rgba(240,136,77,1)"
-                d="M 0,9.914557614324565 A 9.914557021373884 9.914557021373884 0 1 0 19.829114042747733 9.914557614324565 A 9.914557021373884 9.914557021373884 0 1 0 0 9.914557614324565 Z"
+                d="M 0,9.888287067033957 A 9.888287067033954 9.888287067033954 0 1 0 19.776574134067914 9.888287067033957 A 9.888287067033954 9.888287067033954 0 1 0 0 9.888287067033957 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -712,11 +712,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,568.986145,60.789974)">
+            <g transform="matrix(1,0,0,1,570.137146,61.773571)">
               <path
                 id="g-svg-63"
                 fill="rgba(240,136,77,1)"
-                d="M 0,6.807380156595514 A 6.807380156595492 6.807380156595492 0 1 0 13.614760313191027 6.807380156595514 A 6.807380156595492 6.807380156595492 0 1 0 0 6.807380156595514 Z"
+                d="M 0,6.686790710799187 A 6.6867907107991424 6.6867907107991424 0 1 0 13.373581421598374 6.686790710799187 A 6.6867907107991424 6.6867907107991424 0 1 0 0 6.686790710799187 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -724,11 +724,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,588.646057,42.250729)">
+            <g transform="matrix(1,0,0,1,588.879700,42.689411)">
               <path
                 id="g-svg-64"
                 fill="rgba(240,136,77,1)"
-                d="M 0,5.086878592264647 A 5.086878091837118 5.086878091837118 0 1 0 10.173756183674186 5.086878592264647 A 5.086878091837118 5.086878091837118 0 1 0 0 5.086878592264647 Z"
+                d="M 0,5.071246218001079 A 5.071246218001052 5.071246218001052 0 1 0 10.142492436002158 5.071246218001079 A 5.071246218001052 5.071246218001052 0 1 0 0 5.071246218001079 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -736,11 +736,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,69.296692,397.327301)">
+            <g transform="matrix(1,0,0,1,71.053818,401.006134)">
               <path
                 id="g-svg-65"
                 fill="rgba(240,136,77,1)"
-                d="M 0,11.669762302072002 A 11.669762302072002 11.669762302072002 0 1 0 23.339524604144003 11.669762302072002 A 11.669762302072002 11.669762302072002 0 1 0 0 11.669762302072002 Z"
+                d="M 0,10.86005369997929 A 10.860053422284256 10.860053422284256 0 1 0 21.720106844568505 10.86005369997929 A 10.860053422284256 10.860053422284256 0 1 0 0 10.86005369997929 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -748,11 +748,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,501.462067,56.492844)">
+            <g transform="matrix(1,0,0,1,510.853241,59.016678)">
               <path
                 id="g-svg-66"
                 fill="rgba(240,136,77,1)"
-                d="M 0,15.317553127709175 A 15.317553127709152 15.317553127709152 0 1 0 30.63510625541835 15.317553127709175 A 15.317553127709152 15.317553127709152 0 1 0 0 15.317553127709175 Z"
+                d="M 0,13.77560964994764 A 13.775609096114078 13.775609096114078 0 1 0 27.551218192228134 13.77560964994764 A 13.775609096114078 13.775609096114078 0 1 0 0 13.77560964994764 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -760,11 +760,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,577.017151,57.070454)">
+            <g transform="matrix(1,0,0,1,577.665649,57.912773)">
               <path
                 id="g-svg-67"
                 fill="rgba(213,128,255,1)"
-                d="M 0,7.144123761623362 A 7.144123598131275 7.144123598131275 0 1 0 14.288247196262546 7.144123761623362 A 7.144123598131275 7.144123598131275 0 1 0 0 7.144123761623362 Z"
+                d="M 0,7.083109212132484 A 7.083108432843389 7.083108432843389 0 1 0 14.166216865686692 7.083109212132484 A 7.083108432843389 7.083108432843389 0 1 0 0 7.083109212132484 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
@@ -772,11 +772,11 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,545.984802,126.024902)">
+            <g transform="matrix(1,0,0,1,548.833191,129.641846)">
               <path
                 id="g-svg-68"
                 fill="rgba(213,128,255,1)"
-                d="M 0,8.88272651191528 A 8.882726511915251 8.882726511915251 0 1 0 17.76545302383056 8.88272651191528 A 8.882726511915251 8.882726511915251 0 1 0 0 8.88272651191528 Z"
+                d="M 0,8.729543285352975 A 8.72954328535296 8.72954328535296 0 1 0 17.45908657070595 8.729543285352975 A 8.72954328535296 8.72954328535296 0 1 0 0 8.729543285352975 Z"
                 r="3"
                 fill-opacity="0.3"
                 stroke-width="1"
diff --git a/__tests__/integration/snapshots/interaction/indices-line-chart-index-series/step0.svg b/__tests__/integration/snapshots/interaction/indices-line-chart-index-series/step0.svg
index 52e5fb89d5..c5a29ef979 100644
--- a/__tests__/integration/snapshots/interaction/indices-line-chart-index-series/step0.svg
+++ b/__tests__/integration/snapshots/interaction/indices-line-chart-index-series/step0.svg
@@ -64,7 +64,7 @@
             transform="matrix(1,0,0,1,0,0)"
             class="main-layer"
           >
-            <g transform="matrix(1,0,0,1,0,148.607235)">
+            <g transform="matrix(1,0,0,1,0,146.179546)">
               <path
                 id="g-svg-9"
                 fill="none"
@@ -75,7 +75,7 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,131.502330)">
+            <g transform="matrix(1,0,0,1,0,93.695957)">
               <path
                 id="g-svg-10"
                 fill="none"
@@ -86,7 +86,7 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,170.115753)">
+            <g transform="matrix(1,0,0,1,0,160.947285)">
               <path
                 id="g-svg-11"
                 fill="none"
@@ -97,7 +97,7 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,187.466583)">
+            <g transform="matrix(1,0,0,1,0,174.725185)">
               <path
                 id="g-svg-12"
                 fill="none"
@@ -108,7 +108,7 @@
                 class="element"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,155.550095)">
+            <g transform="matrix(1,0,0,1,0,147.924232)">
               <path
                 id="g-svg-13"
                 fill="none"
@@ -132,7 +132,7 @@
               transform="matrix(1,0,0,1,768,92.545464)"
               class="label"
             >
-              <g transform="matrix(1,0,0,1,-0,47.506237)">
+              <g transform="matrix(1,0,0,1,-0,45.078548)">
                 <path
                   id="background"
                   fill="none"
@@ -151,13 +151,13 @@
                   fill-opacity="0.65"
                   font-size="10"
                   font-weight="normal"
-                  style="transform:translate(0px, 57.00623879477678px);"
+                  style="transform:translate(0px, 54.578549817288746px);"
                 >
                   AAPL
                 </text>
               </g>
               <g transform="matrix(1,0,0,1,0,0)">
-                <path id="connector" fill="none" d="M 0,0 L 0,47.506" />
+                <path id="connector" fill="none" d="M 0,0 L 0,45.079" />
               </g>
             </g>
             <g
@@ -166,7 +166,7 @@
               transform="matrix(1,0,0,1,768,1.772360)"
               class="label"
             >
-              <g transform="matrix(1,0,0,1,0,120.704323)">
+              <g transform="matrix(1,0,0,1,0,82.897957)">
                 <path
                   id="background"
                   fill="none"
@@ -185,13 +185,13 @@
                   fill-opacity="0.65"
                   font-size="10"
                   font-weight="normal"
-                  style="transform:translate(0px, 130.20432361838908px);"
+                  style="transform:translate(0px, 92.39795728018802px);"
                 >
                   AMZN
                 </text>
               </g>
               <g transform="matrix(1,0,0,1,0,0)">
-                <path id="connector" fill="none" d="M 0,0 L 0,120.704" />
+                <path id="connector" fill="none" d="M 0,0 L 0,82.898" />
               </g>
             </g>
             <g
@@ -200,7 +200,7 @@
               transform="matrix(1,0,0,1,768,110.030411)"
               class="label"
             >
-              <g transform="matrix(1,0,0,1,-0,59.003754)">
+              <g transform="matrix(1,0,0,1,-0,49.835285)">
                 <path
                   id="background"
                   fill="none"
@@ -219,13 +219,13 @@
                   fill-opacity="0.65"
                   font-size="10"
                   font-weight="normal"
-                  style="transform:translate(0px, 68.50375274341195px);"
+                  style="transform:translate(0px, 59.335286939478436px);"
                 >
                   GOOG
                 </text>
               </g>
               <g transform="matrix(1,0,0,1,0,0)">
-                <path id="connector" fill="none" d="M 0,0 L 0,59.004" />
+                <path id="connector" fill="none" d="M 0,0 L 0,49.835" />
               </g>
             </g>
             <g
@@ -234,7 +234,7 @@
               transform="matrix(1,0,0,1,768,265.912964)"
               class="label"
             >
-              <g transform="matrix(1,0,0,1,0,-41.905411)">
+              <g transform="matrix(1,0,0,1,0,-54.646809)">
                 <path
                   id="background"
                   fill="none"
@@ -253,13 +253,13 @@
                   fill-opacity="0.65"
                   font-size="10"
                   font-weight="normal"
-                  style="transform:translate(0px, -32.405409872939686px);"
+                  style="transform:translate(0px, -45.14681031158693px);"
                 >
                   IBM
                 </text>
               </g>
-              <g transform="matrix(1,0,0,1,0,-22.905001)">
-                <path id="connector" fill="none" d="M 0,22.905 L 0,0" />
+              <g transform="matrix(1,0,0,1,0,-35.646999)">
+                <path id="connector" fill="none" d="M 0,35.647 L 0,0" />
               </g>
             </g>
             <g
@@ -268,7 +268,7 @@
               transform="matrix(1,0,0,1,768,90.235764)"
               class="label"
             >
-              <g transform="matrix(1,0,0,1,0,56.079090)">
+              <g transform="matrix(1,0,0,1,0,48.453232)">
                 <path
                   id="background"
                   fill="none"
@@ -287,17 +287,17 @@
                   fill-opacity="0.65"
                   font-size="10"
                   font-weight="normal"
-                  style="transform:translate(0px, 65.57909106094911px);"
+                  style="transform:translate(0px, 57.953232500762255px);"
                 >
                   MSFT
                 </text>
               </g>
               <g transform="matrix(1,0,0,1,0,0)">
-                <path id="connector" fill="none" d="M 0,0 L 0,56.079" />
+                <path id="connector" fill="none" d="M 0,0 L 0,48.453" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,512.049988,0)">
+          <g transform="matrix(1,0,0,1,434,0)">
             <line
               id="g-svg-39"
               fill="none"
@@ -321,7 +321,7 @@
                 stroke-width="5"
                 dx="2.5"
               >
-                Fri, 09 Sep 2016 00:00:00 GMT
+                Wed, 09 Mar 2016 00:00:00 GMT
               </text>
             </g>
           </g>
diff --git a/__tests__/integration/snapshots/interaction/points-point-regression-quad-transpose/step0.svg b/__tests__/integration/snapshots/interaction/points-point-regression-quad-transpose/step0.svg
index 588a582f5f..72ff31e129 100644
--- a/__tests__/integration/snapshots/interaction/points-point-regression-quad-transpose/step0.svg
+++ b/__tests__/integration/snapshots/interaction/points-point-regression-quad-transpose/step0.svg
@@ -209,7 +209,7 @@
             transform="matrix(1,0,0,1,0,0)"
             class="label-layer"
           />
-          <g transform="matrix(1,0,0,1,0,336.875000)">
+          <g transform="matrix(1,0,0,1,0,334.250000)">
             <line
               id="g-svg-22"
               fill="none"
diff --git a/__tests__/integration/snapshots/interaction/points-point-regression-quad/step0.svg b/__tests__/integration/snapshots/interaction/points-point-regression-quad/step0.svg
index e4676be291..1e0e6056ce 100644
--- a/__tests__/integration/snapshots/interaction/points-point-regression-quad/step0.svg
+++ b/__tests__/integration/snapshots/interaction/points-point-regression-quad/step0.svg
@@ -209,7 +209,7 @@
             transform="matrix(1,0,0,1,0,0)"
             class="label-layer"
           />
-          <g transform="matrix(1,0,0,1,437,0)">
+          <g transform="matrix(1,0,0,1,433.437500,0)">
             <line
               id="g-svg-22"
               fill="none"
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-date-default-format/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line-date-default-format/step0.html
index d0e362c42d..727cbc11b2 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line-date-default-format/step0.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line-date-default-format/step0.html
@@ -7,7 +7,7 @@
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    2008-05-28 08:00:00
+    2008-05-22 08:00:00
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="186.69"
+        title="181.17"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        186.69
+        181.17
       </span>
     </li>
   </ul>
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html
new file mode 100644
index 0000000000..af8688fed0
--- /dev/null
+++ b/__tests__/integration/snapshots/tooltip/aapl-line-overflow/step0.html
@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 210px; top: 310px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    Thu, 22 May 2008 00:00:00 GMT
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="close"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          close
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="181.17"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        181.17
+      </span>
+    </li>
+  </ul>
+</div>
\ No newline at end of file
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line/step0.html
index 721b676765..af8688fed0 100644
--- a/__tests__/integration/snapshots/tooltip/aapl-line/step0.html
+++ b/__tests__/integration/snapshots/tooltip/aapl-line/step0.html
@@ -7,7 +7,7 @@
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    Wed, 28 May 2008 00:00:00 GMT
+    Thu, 22 May 2008 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="186.69"
+        title="181.17"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        186.69
+        181.17
       </span>
     </li>
   </ul>
diff --git a/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html b/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html
index a22b545c6b..3f0541361d 100644
--- a/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html
+++ b/__tests__/integration/snapshots/tooltip/forecast-range-area-line/step0.html
@@ -30,10 +30,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="0.89441218858635"
+        title="0.503192650078109"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        0.89441218858635
+        0.503192650078109
       </span>
     </li>
     <li
@@ -59,10 +59,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="1.30182293816554"
+        title="0.372433776442163"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        1.30182293816554
+        0.372433776442163
       </span>
     </li>
     <li
@@ -88,10 +88,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="-0.0632578758817437"
+        title="-0.274001486727037"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        -0.0632578758817437
+        -0.274001486727037
       </span>
     </li>
     <li
@@ -117,10 +117,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="0.790173258069052"
+        title="0.790086619458202"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        0.790173258069052
+        0.790086619458202
       </span>
     </li>
   </ul>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html
index 9facf5b7eb..b1d61574bd 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-custom/step0.html
@@ -5,14 +5,14 @@
 >
   <div>
     <dv>
-      <h2>2014-04-22 08:00:00</h2>
+      <h2>2014-04-17 08:00:00</h2>
       <span>(200, 300)</span>
       <ul style="padding-left: 1em">
-        <li style="color: #00C9C9">AMZN: 1.2450190713009308</li>
-        <li style="color: #7863FF">MSFT: 1.2107176267247237</li>
-        <li style="color: #1783FF">AAPL: 1.169239562420743</li>
-        <li style="color: #F0884D">GOOG: 1.2201174905986216</li>
-        <li style="color: #D580FF">IBM: 0.9490294515284761</li>
+        <li style="color: #00C9C9">AMZN: 1.2283467230597436</li>
+        <li style="color: #7863FF">MSFT: 1.2113230157833188</li>
+        <li style="color: #1783FF">AAPL: 1.1543739299655218</li>
+        <li style="color: #F0884D">GOOG: 1.2230603917941922</li>
+        <li style="color: #D580FF">IBM: 0.938459989438139</li>
       </ul>
     </dv>
   </div>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html b/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html
index 61ac739219..aff2ee34cc 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-custom/step1.html
@@ -5,14 +5,14 @@
 >
   <div>
     <dv>
-      <h2>2015-01-02 08:00:00</h2>
+      <h2>2014-12-29 08:00:00</h2>
       <span>(300, 300)</span>
       <ul style="padding-left: 1em">
-        <li style="color: #00C9C9">AMZN: 1.1663830378290787</li>
-        <li style="color: #7863FF">MSFT: 1.415682694994935</li>
-        <li style="color: #1783FF">AAPL: 1.682961649163845</li>
-        <li style="color: #F0884D">GOOG: 1.197298000956521</li>
-        <li style="color: #D580FF">IBM: 0.8004148624467089</li>
+        <li style="color: #00C9C9">AMZN: 1.1796907383580681</li>
+        <li style="color: #7863FF">MSFT: 1.4365728863630909</li>
+        <li style="color: #1783FF">AAPL: 1.7534635020687204</li>
+        <li style="color: #F0884D">GOOG: 1.209896794182093</li>
+        <li style="color: #D580FF">IBM: 0.7927593925383544</li>
       </ul>
     </dv>
   </div>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html
index 3ee9e35d39..92c2724d77 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-items/step0.html
@@ -7,7 +7,7 @@
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    Thu, 17 Apr 2014 00:00:00 GMT
+    Mon, 14 Apr 2014 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -94,10 +94,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="1.2"
+        title="1.1"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        1.2
+        1.1
       </span>
     </li>
     <li
@@ -152,10 +152,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="0.9"
+        title="1.0"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        0.9
+        1.0
       </span>
     </li>
   </ul>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html
index 93baa346c6..31544220c9 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step0.html
@@ -7,7 +7,7 @@
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    Fri, 14 Jun 2013 00:00:00 GMT
+    Tue, 11 Jun 2013 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="273.98999"
+        title="274.779999"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        273.98999
+        274.779999
       </span>
     </li>
     <li
@@ -65,10 +65,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="434.692749"
+        title="437.062317"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        434.692749
+        437.062317
       </span>
     </li>
     <li
@@ -94,10 +94,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="202.199997"
+        title="203.979996"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        202.199997
+        203.979996
       </span>
     </li>
     <li
@@ -123,10 +123,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="61.435715"
+        title="62.514286"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        61.435715
+        62.514286
       </span>
     </li>
     <li
@@ -152,10 +152,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="34.400002"
+        title="34.84"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        34.400002
+        34.84
       </span>
     </li>
   </ul>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html
index 8005a4dc2c..4f7bfa42b6 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-reverse/step1.html
@@ -7,7 +7,7 @@
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    Fri, 29 Apr 2016 00:00:00 GMT
+    Tue, 26 Apr 2016 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="659.590027"
+        title="616.880005"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        659.590027
+        616.880005
       </span>
     </li>
     <li
@@ -65,10 +65,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="693.01001"
+        title="708.140015"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        693.01001
+        708.140015
       </span>
     </li>
     <li
@@ -94,10 +94,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="145.940002"
+        title="149.080002"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        145.940002
+        149.080002
       </span>
     </li>
     <li
@@ -123,10 +123,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="93.739998"
+        title="104.349998"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        93.739998
+        104.349998
       </span>
     </li>
     <li
@@ -152,10 +152,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="49.869999"
+        title="51.439999"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        49.869999
+        51.439999
       </span>
     </li>
   </ul>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html b/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html
index 4fb8c10417..df762689a9 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line-series/step0.html
@@ -7,7 +7,7 @@
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    Fri, 06 Sep 2013 00:00:00 GMT
+    Tue, 03 Sep 2013 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="295.859985"
+        title="288.799988"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        295.859985
+        288.799988
       </span>
     </li>
     <li
@@ -65,10 +65,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="436.948059"
+        title="427.410095"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        436.948059
+        427.410095
       </span>
     </li>
     <li
@@ -94,10 +94,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="183.029999"
+        title="183.960007"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        183.029999
+        183.960007
       </span>
     </li>
     <li
@@ -123,10 +123,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="71.174286"
+        title="69.797142"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        71.174286
+        69.797142
       </span>
     </li>
     <li
@@ -152,10 +152,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="31.15"
+        title="31.879999"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        31.15
+        31.879999
       </span>
     </li>
   </ul>
diff --git a/__tests__/integration/snapshots/tooltip/indices-line/step0.html b/__tests__/integration/snapshots/tooltip/indices-line/step0.html
index 116b730483..5f3ee34ebe 100644
--- a/__tests__/integration/snapshots/tooltip/indices-line/step0.html
+++ b/__tests__/integration/snapshots/tooltip/indices-line/step0.html
@@ -7,7 +7,7 @@
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    2014-04-22 08:00:00
+    2014-04-17 08:00:00
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="1.2450190713009308"
+        title="1.2283467230597436"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        1.2450190713009308
+        1.2283467230597436
       </span>
     </li>
     <li
@@ -65,10 +65,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="1.2107176267247237"
+        title="1.2113230157833188"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        1.2107176267247237
+        1.2113230157833188
       </span>
     </li>
     <li
@@ -94,10 +94,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="1.169239562420743"
+        title="1.1543739299655218"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        1.169239562420743
+        1.1543739299655218
       </span>
     </li>
     <li
@@ -123,10 +123,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="1.2201174905986216"
+        title="1.2230603917941922"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        1.2201174905986216
+        1.2230603917941922
       </span>
     </li>
     <li
@@ -152,10 +152,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="0.9490294515284761"
+        title="0.938459989438139"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        0.9490294515284761
+        0.938459989438139
       </span>
     </li>
   </ul>
diff --git a/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html b/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html
index c725b8ccea..e41d132495 100644
--- a/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html
+++ b/__tests__/integration/snapshots/tooltip/temperature2-line-threshold/step0.html
@@ -7,7 +7,7 @@
     class="g2-tooltip-title"
     style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
   >
-    Mon, 21 Nov 2011 00:00:00 GMT
+    Sun, 20 Nov 2011 00:00:00 GMT
   </div>
   <ul
     class="g2-tooltip-list"
@@ -36,10 +36,10 @@
       </span>
       <span
         class="g2-tooltip-list-item-value"
-        title="51.1"
+        title="50.4"
         style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
       >
-        51.1
+        50.4
       </span>
     </li>
   </ul>
diff --git a/__tests__/plots/interaction/indices-line-chart-index-series.ts b/__tests__/plots/interaction/indices-line-chart-index-series.ts
index dc08f5671a..2ef5936133 100644
--- a/__tests__/plots/interaction/indices-line-chart-index-series.ts
+++ b/__tests__/plots/interaction/indices-line-chart-index-series.ts
@@ -26,6 +26,7 @@ export async function indicesLineChartIndexSeries(): Promise<G2Spec> {
       },
     ],
     interaction: {
+      tooltip: false,
       chartIndex: {
         ruleStroke: '#aaa',
         labelDx: 5,
diff --git a/__tests__/plots/tooltip/aapl-line-overflow.ts b/__tests__/plots/tooltip/aapl-line-overflow.ts
new file mode 100644
index 0000000000..3ef65a85ed
--- /dev/null
+++ b/__tests__/plots/tooltip/aapl-line-overflow.ts
@@ -0,0 +1,35 @@
+import { G2Spec } from '../../../src';
+import { seriesTooltipSteps } from './utils';
+
+export function aaplLineOverflow(): G2Spec {
+  return {
+    type: 'view',
+    children: [
+      {
+        type: 'line',
+        data: {
+          type: 'fetch',
+          value: 'data/aapl.csv',
+        },
+        encode: {
+          x: 'date',
+          y: 'close',
+        },
+        tooltip: {
+          title: (d) => new Date(d.date).toUTCString(),
+        },
+      },
+      {
+        type: 'text',
+        style: {
+          x: 0,
+          y: 0,
+          text: 'hello world',
+          textAlign: 'end',
+        },
+      },
+    ],
+  };
+}
+
+aaplLineOverflow.steps = seriesTooltipSteps([200, 300]);
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
index 50ed27a899..95c5244784 100644
--- a/__tests__/plots/tooltip/index.ts
+++ b/__tests__/plots/tooltip/index.ts
@@ -68,3 +68,4 @@ export { mockIntervalShared } from './mock-interval-shared';
 export { stateAgesIntervalCustomStyle } from './stateages-interval-custom-style';
 export { mockTooltipClosest } from './mock-tooltip-closest';
 export { stateAgesIntervalScrollbar } from './stateages-interval-scrollbar';
+export { aaplLineOverflow } from './aapl-line-overflow';
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
index a00154f8d9..ff2861dbd3 100644
--- a/src/interaction/tooltip.ts
+++ b/src/interaction/tooltip.ts
@@ -16,6 +16,7 @@ import {
   selectFacetG2Elements,
   createDatumof,
   selectElementByData,
+  bboxOf,
 } from './utils';
 import { dataOf } from './event';
 
@@ -563,7 +564,7 @@ export function seriesTooltip(
     (event) => {
       const mouse = mousePosition(root, event);
       if (!mouse) return;
-      const bbox = root.getRenderBounds();
+      const bbox = bboxOf(root);
       const x = bbox.min[0];
       const y = bbox.min[1];
       const focus = [mouse[0] - startX, mouse[1] - startY];
diff --git a/src/interaction/utils.ts b/src/interaction/utils.ts
index b473664762..3075990750 100644
--- a/src/interaction/utils.ts
+++ b/src/interaction/utils.ts
@@ -42,9 +42,15 @@ export function selectPlotArea(root: DisplayObject): DisplayObject {
   return select(root).select(`.${PLOT_CLASS_NAME}`).node();
 }
 
+export function bboxOf(node) {
+  if (node.nodeName !== 'rect') return node.getRenderBounds();
+  const { x, y, width, height } = node.style;
+  return { min: [x, y], max: [x + width, y + height] };
+}
+
 export function mousePosition(target, event) {
   const { offsetX, offsetY } = event;
-  const bbox = target.getRenderBounds();
+  const bbox = bboxOf(target);
   const {
     min: [x, y],
     max: [x1, y1],