diff --git a/frontend/src/metabase/visualizations/lib/apply_tooltips.js b/frontend/src/metabase/visualizations/lib/apply_tooltips.js
index 3c7aef85d6f88dc8ff6faae36c5c20386334ad9b..0fe9817f9a8eea9ced65a1c98ad27c6fba72e33d 100644
--- a/frontend/src/metabase/visualizations/lib/apply_tooltips.js
+++ b/frontend/src/metabase/visualizations/lib/apply_tooltips.js
@@ -64,9 +64,12 @@ function applyChartTooltips(
               {
                 key: getFriendlyName(cols[1]),
                 value: isNormalized
-                  ? `${formatValue(d.data.value) * 100}%`
+                  ? formatValue(d.data.value, {
+                      number_style: "percent",
+                      column: cols[1],
+                    })
                   : d.data.value,
-                col: cols[1],
+                col: { ...cols[1] },
               },
             ];
 
diff --git a/frontend/test/lib/formatting.unit.spec.js b/frontend/test/lib/formatting.unit.spec.js
index 8c117322293e3a8e5cf8a170b8b1fa556f2644cd..55daf41302d0372fa5e73037208106b6ce5c7478 100644
--- a/frontend/test/lib/formatting.unit.spec.js
+++ b/frontend/test/lib/formatting.unit.spec.js
@@ -75,7 +75,11 @@ describe("formatting", () => {
     it("should return a component for links in jsx + rich mode", () => {
       expect(
         isElementOfType(
-          formatValue("http://metabase.com/", { jsx: true, rich: true }),
+          formatValue("http://metabase.com/", {
+            jsx: true,
+            rich: true,
+            view_as: "link",
+          }),
           ExternalLink,
         ),
       ).toEqual(true);
@@ -83,7 +87,11 @@ describe("formatting", () => {
     it("should return a component for email addresses in jsx + rich mode", () => {
       expect(
         isElementOfType(
-          formatValue("tom@metabase.com", { jsx: true, rich: true }),
+          formatValue("tom@metabase.com", {
+            jsx: true,
+            rich: true,
+            view_as: "email_link",
+          }),
           ExternalLink,
         ),
       ).toEqual(true);
@@ -97,19 +105,31 @@ describe("formatting", () => {
     it("should return a component for http:, https:, and mailto: links in jsx mode", () => {
       expect(
         isElementOfType(
-          formatUrl("http://metabase.com/", { jsx: true, rich: true }),
+          formatUrl("http://metabase.com/", {
+            jsx: true,
+            rich: true,
+            view_as: "link",
+          }),
           ExternalLink,
         ),
       ).toEqual(true);
       expect(
         isElementOfType(
-          formatUrl("https://metabase.com/", { jsx: true, rich: true }),
+          formatUrl("https://metabase.com/", {
+            jsx: true,
+            rich: true,
+            view_as: "link",
+          }),
           ExternalLink,
         ),
       ).toEqual(true);
       expect(
         isElementOfType(
-          formatUrl("mailto:tom@metabase.com", { jsx: true, rich: true }),
+          formatUrl("mailto:tom@metabase.com", {
+            jsx: true,
+            rich: true,
+            view_as: "link",
+          }),
           ExternalLink,
         ),
       ).toEqual(true);
@@ -117,25 +137,34 @@ describe("formatting", () => {
     it("should not return a link component for unrecognized links in jsx mode", () => {
       expect(
         isElementOfType(
-          formatUrl("nonexistent://metabase.com/", { jsx: true, rich: true }),
+          formatUrl("nonexistent://metabase.com/", {
+            jsx: true,
+            rich: true,
+            view_as: "link",
+          }),
           ExternalLink,
         ),
       ).toEqual(false);
       expect(
         isElementOfType(
-          formatUrl("metabase.com", { jsx: true, rich: true }),
+          formatUrl("metabase.com", { jsx: true, rich: true, view_as: "link" }),
           ExternalLink,
         ),
       ).toEqual(false);
     });
     it("should return a string for javascript:, data:, and other links in jsx mode", () => {
       expect(
-        formatUrl("javascript:alert('pwnd')", { jsx: true, rich: true }),
+        formatUrl("javascript:alert('pwnd')", {
+          jsx: true,
+          rich: true,
+          view_as: "link",
+        }),
       ).toEqual("javascript:alert('pwnd')");
       expect(
         formatUrl("data:text/plain;charset=utf-8,hello%20world", {
           jsx: true,
           rich: true,
+          view_as: "link",
         }),
       ).toEqual("data:text/plain;charset=utf-8,hello%20world");
     });
diff --git a/frontend/test/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js b/frontend/test/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js
index 9f6d63747b3b856988baa0eab251e3d3faaa4743..e3d0f7b33bb2c9746f20d948b8234e738bc834c0 100644
--- a/frontend/test/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js
+++ b/frontend/test/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js
@@ -99,7 +99,7 @@ describe("LineAreaBarRenderer-bar", () => {
 
                     normalizedDisplay = [
                       { key: "Category", value: "A" },
-                      { key: "% Sum", value: "33%" },
+                      { key: "% Sum", value: "33.33%" },
                     ];
 
                     expect(data).toEqual(
@@ -116,7 +116,7 @@ describe("LineAreaBarRenderer-bar", () => {
 
                     normalizedDisplay = [
                       { key: "Category", value: "A" },
-                      { key: "% Count", value: "67%" },
+                      { key: "% Count", value: "66.67%" },
                     ];
 
                     expect(data).toEqual(