diff --git a/packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap b/packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap
index 498e1f3a88..0cf7bdc83f 100644
--- a/packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap
+++ b/packages/ui/build/storybook/__snapshots__/storyshots.test.js.snap
@@ -8984,11 +8984,11 @@ exports[`Storyshots Components/BundleAssetsTotalsChartBars component 1`] = `
   <div
     className="root"
   >
-    <h2
+    <h3
       className="title"
     >
       Total size by type
-    </h2>
+    </h3>
     <div
       className="items"
     >
@@ -9004,108 +9004,532 @@ exports[`Storyshots Components/BundleAssetsTotalsChartBars component 1`] = `
           className="root itemChart"
         >
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(136,132,216,0.8)",
-                "width": "2.65%",
+                "background": "rgba(136,132,216,0.9)",
+                "width": "72.59%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              CSS
+              <span
+                className="itemLabel"
+              >
+                JS
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    JS
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          578.07
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          KB
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                    <span
+                      className="root delta"
+                    >
+                      <code
+                        className="value slightlyNegative"
+                      >
+                        +80B (+0.01%)
+                      </code>
+                    </span>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        577.99KB
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(134,178,234,0.8)",
-                "width": "72.31%",
+                "background": "rgba(134,178,234,0.9)",
+                "width": "2.66%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              JS
+              <span
+                className="itemLabel"
+              >
+                CSS
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    CSS
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          21.19
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          KB
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                    <span
+                      className="root delta"
+                    >
+                      <code
+                        className="value positive"
+                      >
+                        -3.14KB (-12.91%)
+                      </code>
+                    </span>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        24.33KB
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(139,208,215,0.8000000000000002)",
-                "width": "24.34%",
+                "background": "rgba(139,208,215,0.9)",
+                "width": "24.43%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              IMG
+              <span
+                className="itemLabel"
+              >
+                IMG
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    IMG
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          194.57
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          KB
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        194.57KB
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(130,202,157,0.8)",
+                "background": "rgba(130,202,157,0.9)",
                 "width": "0%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              Media
+              <span
+                className="itemLabel"
+              >
+                Media
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    Media
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          0
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          B
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        0B
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(159,219,115,0.8)",
+                "background": "rgba(159,219,115,0.8999999999999999)",
                 "width": "0%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              Fonts
+              <span
+                className="itemLabel"
+              >
+                Fonts
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    Fonts
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          0
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          B
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        0B
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(195,233,93,0.8)",
+                "background": "rgba(195,233,93,0.9)",
                 "width": "0.24%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              HTML
+              <span
+                className="itemLabel"
+              >
+                HTML
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    HTML
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          1.93
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          KB
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        1.93KB
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(235,215,88,0.8)",
+                "background": "rgba(235,215,88,0.8999999999999999)",
                 "width": "0.08%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              Other
+              <span
+                className="itemLabel"
+              >
+                Other
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    Other
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          627
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          B
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        627B
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
         </div>
@@ -9122,108 +9546,559 @@ exports[`Storyshots Components/BundleAssetsTotalsChartBars component 1`] = `
           className="root itemChart"
         >
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(136,132,216,0.8)",
-                "width": "3.04%",
+                "background": "rgba(136,132,216,0.9)",
+                "width": "72.3%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              CSS
+              <span
+                className="itemLabel"
+              >
+                JS
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    JS
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          577.99
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          KB
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                    <span
+                      className="root delta"
+                    >
+                      <code
+                        className="value negative"
+                      >
+                        +577.99KB (+100%)
+                      </code>
+                    </span>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        0B
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(134,178,234,0.8)",
-                "width": "72.3%",
+                "background": "rgba(134,178,234,0.9)",
+                "width": "3.04%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              JS
+              <span
+                className="itemLabel"
+              >
+                CSS
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    CSS
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          24.33
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          KB
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                    <span
+                      className="root delta"
+                    >
+                      <code
+                        className="value negative"
+                      >
+                        +24.33KB (+100%)
+                      </code>
+                    </span>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        0B
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(139,208,215,0.8000000000000002)",
+                "background": "rgba(139,208,215,0.9)",
                 "width": "24.34%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              IMG
+              <span
+                className="itemLabel"
+              >
+                IMG
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    IMG
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          194.57
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          KB
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                    <span
+                      className="root delta"
+                    >
+                      <code
+                        className="value negative"
+                      >
+                        +194.57KB (+100%)
+                      </code>
+                    </span>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        0B
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(130,202,157,0.8)",
+                "background": "rgba(130,202,157,0.9)",
                 "width": "0%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              Media
+              <span
+                className="itemLabel"
+              >
+                Media
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    Media
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          0
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          B
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        0B
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(159,219,115,0.8)",
+                "background": "rgba(159,219,115,0.8999999999999999)",
                 "width": "0%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              Fonts
+              <span
+                className="itemLabel"
+              >
+                Fonts
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    Fonts
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          0
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          B
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        0B
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(195,233,93,0.8)",
+                "background": "rgba(195,233,93,0.9)",
                 "width": "0.24%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              HTML
+              <span
+                className="itemLabel"
+              >
+                HTML
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    HTML
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          1.93
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          KB
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                    <span
+                      className="root delta"
+                    >
+                      <code
+                        className="value negative"
+                      >
+                        +1.93KB (+100%)
+                      </code>
+                    </span>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        0B
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
           <span
-            className="item textOverflowed"
+            className="item"
             style={
               Object {
-                "background": "rgba(235,215,88,0.8)",
+                "background": "rgba(235,215,88,0.8999999999999999)",
                 "width": "0.08%",
               }
             }
           >
             <span
-              className="itemLabel"
+              className="root itemContent"
             >
-              Other
+              <span
+                className="itemLabel"
+              >
+                Other
+              </span>
+              <div
+                className="tooltip"
+              >
+                <div
+                  className="root itemTooltip large"
+                >
+                  <h3
+                    className="title"
+                  >
+                    Other
+                  </h3>
+                  <div
+                    className="currentContainer"
+                  >
+                    <code
+                      className="currentMetric root"
+                    >
+                      <div
+                        className="display"
+                      >
+                        <span
+                          className="displayValue"
+                        >
+                          627
+                        </span>
+                        <span
+                          className="displayUnit"
+                        >
+                          B
+                        </span>
+                      </div>
+                      <span
+                        className="delta"
+                      />
+                    </code>
+                    <span
+                      className="root delta"
+                    >
+                      <code
+                        className="value negative"
+                      >
+                        +627B (+100%)
+                      </code>
+                    </span>
+                  </div>
+                  <code
+                    className="baselineMetric root"
+                  >
+                    <div
+                      className="display"
+                    >
+                      <span
+                        className="displayValue"
+                      >
+                        0B
+                      </span>
+                    </div>
+                    <span
+                      className="delta"
+                    />
+                  </code>
+                </div>
+              </div>
             </span>
           </span>
         </div>
@@ -330938,11 +331813,11 @@ exports[`Storyshots Prototypes/BundlePage totals 1`] = `
         <div
           className="root"
         >
-          <h2
+          <h3
             className="title"
           >
             Total size by type
-          </h2>
+          </h3>
           <div
             className="items"
           >
@@ -330958,108 +331833,532 @@ exports[`Storyshots Prototypes/BundlePage totals 1`] = `
                 className="root itemChart"
               >
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(136,132,216,0.8)",
-                      "width": "2.65%",
+                      "background": "rgba(136,132,216,0.9)",
+                      "width": "72.59%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    CSS
+                    <span
+                      className="itemLabel"
+                    >
+                      JS
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          JS
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                578.07
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                KB
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                          <span
+                            className="root delta"
+                          >
+                            <code
+                              className="value slightlyNegative"
+                            >
+                              +80B (+0.01%)
+                            </code>
+                          </span>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              577.99KB
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(134,178,234,0.8)",
-                      "width": "72.31%",
+                      "background": "rgba(134,178,234,0.9)",
+                      "width": "2.66%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    JS
+                    <span
+                      className="itemLabel"
+                    >
+                      CSS
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          CSS
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                21.19
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                KB
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                          <span
+                            className="root delta"
+                          >
+                            <code
+                              className="value positive"
+                            >
+                              -3.14KB (-12.91%)
+                            </code>
+                          </span>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              24.33KB
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(139,208,215,0.8000000000000002)",
-                      "width": "24.34%",
+                      "background": "rgba(139,208,215,0.9)",
+                      "width": "24.43%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    IMG
+                    <span
+                      className="itemLabel"
+                    >
+                      IMG
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          IMG
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                194.57
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                KB
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              194.57KB
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(130,202,157,0.8)",
+                      "background": "rgba(130,202,157,0.9)",
                       "width": "0%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    Media
+                    <span
+                      className="itemLabel"
+                    >
+                      Media
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          Media
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                0
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                B
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              0B
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(159,219,115,0.8)",
+                      "background": "rgba(159,219,115,0.8999999999999999)",
                       "width": "0%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    Fonts
+                    <span
+                      className="itemLabel"
+                    >
+                      Fonts
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          Fonts
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                0
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                B
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              0B
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(195,233,93,0.8)",
+                      "background": "rgba(195,233,93,0.9)",
                       "width": "0.24%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    HTML
+                    <span
+                      className="itemLabel"
+                    >
+                      HTML
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          HTML
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                1.93
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                KB
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              1.93KB
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(235,215,88,0.8)",
+                      "background": "rgba(235,215,88,0.8999999999999999)",
                       "width": "0.08%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    Other
+                    <span
+                      className="itemLabel"
+                    >
+                      Other
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          Other
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                627
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                B
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              627B
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
               </div>
@@ -331076,108 +332375,559 @@ exports[`Storyshots Prototypes/BundlePage totals 1`] = `
                 className="root itemChart"
               >
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(136,132,216,0.8)",
-                      "width": "3.04%",
+                      "background": "rgba(136,132,216,0.9)",
+                      "width": "72.3%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    CSS
+                    <span
+                      className="itemLabel"
+                    >
+                      JS
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          JS
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                577.99
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                KB
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                          <span
+                            className="root delta"
+                          >
+                            <code
+                              className="value negative"
+                            >
+                              +577.99KB (+100%)
+                            </code>
+                          </span>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              0B
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(134,178,234,0.8)",
-                      "width": "72.3%",
+                      "background": "rgba(134,178,234,0.9)",
+                      "width": "3.04%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    JS
+                    <span
+                      className="itemLabel"
+                    >
+                      CSS
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          CSS
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                24.33
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                KB
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                          <span
+                            className="root delta"
+                          >
+                            <code
+                              className="value negative"
+                            >
+                              +24.33KB (+100%)
+                            </code>
+                          </span>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              0B
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(139,208,215,0.8000000000000002)",
+                      "background": "rgba(139,208,215,0.9)",
                       "width": "24.34%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    IMG
+                    <span
+                      className="itemLabel"
+                    >
+                      IMG
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          IMG
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                194.57
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                KB
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                          <span
+                            className="root delta"
+                          >
+                            <code
+                              className="value negative"
+                            >
+                              +194.57KB (+100%)
+                            </code>
+                          </span>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              0B
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(130,202,157,0.8)",
+                      "background": "rgba(130,202,157,0.9)",
                       "width": "0%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    Media
+                    <span
+                      className="itemLabel"
+                    >
+                      Media
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          Media
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                0
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                B
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              0B
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(159,219,115,0.8)",
+                      "background": "rgba(159,219,115,0.8999999999999999)",
                       "width": "0%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    Fonts
+                    <span
+                      className="itemLabel"
+                    >
+                      Fonts
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          Fonts
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                0
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                B
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              0B
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(195,233,93,0.8)",
+                      "background": "rgba(195,233,93,0.9)",
                       "width": "0.24%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    HTML
+                    <span
+                      className="itemLabel"
+                    >
+                      HTML
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          HTML
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                1.93
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                KB
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                          <span
+                            className="root delta"
+                          >
+                            <code
+                              className="value negative"
+                            >
+                              +1.93KB (+100%)
+                            </code>
+                          </span>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              0B
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
                 <span
-                  className="item textOverflowed"
+                  className="item"
                   style={
                     Object {
-                      "background": "rgba(235,215,88,0.8)",
+                      "background": "rgba(235,215,88,0.8999999999999999)",
                       "width": "0.08%",
                     }
                   }
                 >
                   <span
-                    className="itemLabel"
+                    className="root itemContent"
                   >
-                    Other
+                    <span
+                      className="itemLabel"
+                    >
+                      Other
+                    </span>
+                    <div
+                      className="tooltip"
+                    >
+                      <div
+                        className="root itemTooltip large"
+                      >
+                        <h3
+                          className="title"
+                        >
+                          Other
+                        </h3>
+                        <div
+                          className="currentContainer"
+                        >
+                          <code
+                            className="currentMetric root"
+                          >
+                            <div
+                              className="display"
+                            >
+                              <span
+                                className="displayValue"
+                              >
+                                627
+                              </span>
+                              <span
+                                className="displayUnit"
+                              >
+                                B
+                              </span>
+                            </div>
+                            <span
+                              className="delta"
+                            />
+                          </code>
+                          <span
+                            className="root delta"
+                          >
+                            <code
+                              className="value negative"
+                            >
+                              +627B (+100%)
+                            </code>
+                          </span>
+                        </div>
+                        <code
+                          className="baselineMetric root"
+                        >
+                          <div
+                            className="display"
+                          >
+                            <span
+                              className="displayValue"
+                            >
+                              0B
+                            </span>
+                          </div>
+                          <span
+                            className="delta"
+                          />
+                        </code>
+                      </div>
+                    </div>
                   </span>
                 </span>
               </div>
@@ -332447,98 +334197,6 @@ exports[`Storyshots UI/Alert with kind warning 1`] = `
 </div>
 `;
 
-exports[`Storyshots UI/BarChart default 1`] = `
-<div
-  style={
-    Object {
-      "height": "100%",
-      "padding": "24px",
-      "width": "100%",
-    }
-  }
->
-  <div
-    className="root"
-  >
-    <span
-      className="item textOverflowed"
-      style={
-        Object {
-          "background": "rgba(136,132,216,0.8)",
-          "width": "36.59%",
-        }
-      }
-    >
-      <span
-        className="itemLabel"
-      >
-        JS
-      </span>
-    </span>
-    <span
-      className="item textOverflowed"
-      style={
-        Object {
-          "background": "rgba(140,203,227,0.8)",
-          "width": "24.39%",
-        }
-      }
-    >
-      <span
-        className="itemLabel"
-      >
-        CSS
-      </span>
-    </span>
-    <span
-      className="item textOverflowed"
-      style={
-        Object {
-          "background": "rgba(135,205,150,0.8000000000000002)",
-          "width": "36.59%",
-        }
-      }
-    >
-      <span
-        className="itemLabel"
-      >
-        IMG
-      </span>
-    </span>
-    <span
-      className="item textOverflowed"
-      style={
-        Object {
-          "background": "rgba(183,228,99,0.8)",
-          "width": "0%",
-        }
-      }
-    >
-      <span
-        className="itemLabel"
-      >
-        Others
-      </span>
-    </span>
-    <span
-      className="item textOverflowed"
-      style={
-        Object {
-          "background": "rgba(255,198,88,0.8)",
-          "width": "2.44%",
-        }
-      }
-    >
-      <span
-        className="itemLabel"
-      >
-        HTML
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
 exports[`Storyshots UI/Box default 1`] = `
 <div
   style={
@@ -333274,6 +334932,524 @@ exports[`Storyshots UI/FiltersDropdown disable options 1`] = `
 </div>
 `;
 
+exports[`Storyshots UI/HorizontalBarChart default 1`] = `
+<div
+  style={
+    Object {
+      "height": "100%",
+      "padding": "24px",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="root"
+  >
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "rgba(136,132,216,0.9)",
+          "width": "36.59%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          JS
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "rgba(140,203,227,0.8999999999999999)",
+          "width": "24.39%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          CSS
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "rgba(135,205,150,0.9)",
+          "width": "36.59%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          IMG
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "rgba(183,228,99,0.8999999999999999)",
+          "width": "0%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          Others
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "rgba(255,198,88,0.9)",
+          "width": "2.44%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          HTML
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = `
+<div
+  style={
+    Object {
+      "height": "100%",
+      "padding": "24px",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="root"
+  >
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "red",
+          "width": "36.59%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          JS
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "green",
+          "width": "24.39%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          CSS
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "orange",
+          "width": "36.59%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          IMG
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "blue",
+          "width": "0%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          Others
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "pink",
+          "width": "2.44%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          HTML
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = `
+<div
+  style={
+    Object {
+      "height": "100%",
+      "padding": "24px",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="root"
+  >
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "red",
+          "width": "36.59%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          <h3>
+            JS
+          </h3>
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "green",
+          "width": "24.39%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          <h3>
+            JS
+          </h3>
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "orange",
+          "width": "36.59%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          <h3>
+            JS
+          </h3>
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "blue",
+          "width": "0%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          <h3>
+            JS
+          </h3>
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "pink",
+          "width": "2.44%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          <h3>
+            JS
+          </h3>
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = `
+<div
+  style={
+    Object {
+      "height": "100%",
+      "padding": "24px",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="root"
+  >
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "rgba(136,132,216,0.9)",
+          "width": "25%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          JS
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "rgba(140,203,227,0.8999999999999999)",
+          "width": "16.67%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          CSS
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "rgba(135,205,150,0.9)",
+          "width": "25%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          IMG
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "rgba(183,228,99,0.8999999999999999)",
+          "width": "0%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          Others
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+    <span
+      className="item"
+      style={
+        Object {
+          "background": "rgba(255,198,88,0.9)",
+          "width": "1.67%",
+        }
+      }
+    >
+      <span
+        className="root itemContent"
+      >
+        <span
+          className="itemLabel"
+        >
+          HTML
+        </span>
+        <div
+          className="tooltip"
+        />
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Storyshots UI/Icon all 1`] = `
 <div
   style={
diff --git a/packages/ui/scripts/generate-chart-colors.js b/packages/ui/scripts/generate-chart-colors.js
index 31eae95586..40b4b15dfd 100644
--- a/packages/ui/scripts/generate-chart-colors.js
+++ b/packages/ui/scripts/generate-chart-colors.js
@@ -5,7 +5,7 @@ const fs = require('fs');
 const colormap = require('colormap');
 const hexRgb = require('hex-rgb');
 
-const FILE_COLORS = path.join(__dirname, '../src/ui/chart/chart.colors.json');
+const FILE_COLORS = path.join(__dirname, '../src/components/chart/chart.colors.json');
 
 const COLORMAP_RECHARTS = [
   '#8884d8',
@@ -28,7 +28,7 @@ const colors = colormap({
   colormap: COLORMAP,
   nshades: COLORMAP.length + 1,
   format: 'rgbaString',
-  alpha: 0.8,
+  alpha: 0.9,
 });
 
 fs.writeFile(FILE_COLORS, JSON.stringify(colors, null, 2), (err) => {
diff --git a/packages/ui/src/components/chart/chart.colors.json b/packages/ui/src/components/chart/chart.colors.json
index 148bfb4cbc..e21edffe39 100644
--- a/packages/ui/src/components/chart/chart.colors.json
+++ b/packages/ui/src/components/chart/chart.colors.json
@@ -1,45 +1,45 @@
 [
-  "rgba(136,132,216,0.8)",
-  "rgba(135,137,219,0.8000000000000002)",
-  "rgba(135,142,222,0.8)",
-  "rgba(134,147,225,0.8)",
-  "rgba(133,151,228,0.8)",
-  "rgba(132,156,231,0.8)",
-  "rgba(132,161,234,0.8)",
-  "rgba(131,166,237,0.8)",
-  "rgba(132,172,235,0.8000000000000002)",
-  "rgba(134,178,234,0.8)",
-  "rgba(135,184,232,0.8)",
-  "rgba(137,191,230,0.8)",
-  "rgba(138,197,228,0.8)",
-  "rgba(140,203,227,0.8)",
-  "rgba(141,209,225,0.8)",
-  "rgba(139,208,215,0.8000000000000002)",
-  "rgba(138,207,206,0.8)",
-  "rgba(136,206,196,0.8)",
-  "rgba(135,205,186,0.8)",
-  "rgba(133,204,176,0.8)",
-  "rgba(132,203,167,0.8)",
-  "rgba(130,202,157,0.8)",
-  "rgba(135,205,150,0.8000000000000002)",
-  "rgba(140,208,143,0.8)",
-  "rgba(145,211,136,0.8)",
-  "rgba(149,213,129,0.8)",
-  "rgba(154,216,122,0.8)",
-  "rgba(159,219,115,0.8)",
-  "rgba(164,222,108,0.8)",
-  "rgba(170,224,105,0.8000000000000002)",
-  "rgba(177,226,102,0.8)",
-  "rgba(183,228,99,0.8)",
-  "rgba(189,231,96,0.8)",
-  "rgba(195,233,93,0.8)",
-  "rgba(202,235,90,0.8)",
-  "rgba(208,237,87,0.8)",
-  "rgba(215,231,87,0.8000000000000002)",
-  "rgba(221,226,87,0.8)",
-  "rgba(228,220,87,0.8)",
-  "rgba(235,215,88,0.8)",
-  "rgba(242,209,88,0.8)",
-  "rgba(248,204,88,0.8)",
-  "rgba(255,198,88,0.8)"
+  "rgba(136,132,216,0.9)",
+  "rgba(135,137,219,0.9)",
+  "rgba(135,142,222,0.9)",
+  "rgba(134,147,225,0.8999999999999999)",
+  "rgba(133,151,228,0.8999999999999999)",
+  "rgba(132,156,231,0.9)",
+  "rgba(132,161,234,0.8999999999999999)",
+  "rgba(131,166,237,0.9)",
+  "rgba(132,172,235,0.9)",
+  "rgba(134,178,234,0.9)",
+  "rgba(135,184,232,0.8999999999999999)",
+  "rgba(137,191,230,0.8999999999999999)",
+  "rgba(138,197,228,0.9)",
+  "rgba(140,203,227,0.8999999999999999)",
+  "rgba(141,209,225,0.9)",
+  "rgba(139,208,215,0.9)",
+  "rgba(138,207,206,0.9)",
+  "rgba(136,206,196,0.8999999999999999)",
+  "rgba(135,205,186,0.8999999999999999)",
+  "rgba(133,204,176,0.9)",
+  "rgba(132,203,167,0.8999999999999999)",
+  "rgba(130,202,157,0.9)",
+  "rgba(135,205,150,0.9)",
+  "rgba(140,208,143,0.9)",
+  "rgba(145,211,136,0.8999999999999999)",
+  "rgba(149,213,129,0.8999999999999999)",
+  "rgba(154,216,122,0.9)",
+  "rgba(159,219,115,0.8999999999999999)",
+  "rgba(164,222,108,0.9)",
+  "rgba(170,224,105,0.9)",
+  "rgba(177,226,102,0.9)",
+  "rgba(183,228,99,0.8999999999999999)",
+  "rgba(189,231,96,0.8999999999999999)",
+  "rgba(195,233,93,0.9)",
+  "rgba(202,235,90,0.8999999999999999)",
+  "rgba(208,237,87,0.9)",
+  "rgba(215,231,87,0.9)",
+  "rgba(221,226,87,0.9)",
+  "rgba(228,220,87,0.8999999999999999)",
+  "rgba(235,215,88,0.8999999999999999)",
+  "rgba(242,209,88,0.9)",
+  "rgba(248,204,88,0.8999999999999999)",
+  "rgba(255,198,88,0.9)"
 ]
\ No newline at end of file