diff --git a/test/visits/charts/__snapshots__/DoughnutChart.test.tsx.snap b/test/visits/charts/__snapshots__/DoughnutChart.test.tsx.snap
index d79b0b28..621d84fa 100644
--- a/test/visits/charts/__snapshots__/DoughnutChart.test.tsx.snap
+++ b/test/visits/charts/__snapshots__/DoughnutChart.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`<DoughnutChart /> > renders Doughnut with expected props 1`] = `
           >
             <div
               class="recharts-default-tooltip"
-              style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+              style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
             >
               <p
                 class="recharts-tooltip-label"
@@ -202,7 +202,7 @@ exports[`<DoughnutChart /> > renders Doughnut with expected props 2`] = `
           >
             <div
               class="recharts-default-tooltip"
-              style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+              style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
             >
               <p
                 class="recharts-tooltip-label"
@@ -345,7 +345,7 @@ exports[`<DoughnutChart /> > renders Doughnut with expected props 3`] = `
           >
             <div
               class="recharts-default-tooltip"
-              style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+              style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
             >
               <p
                 class="recharts-tooltip-label"
diff --git a/test/visits/charts/__snapshots__/HorizontalBarChart.test.tsx.snap b/test/visits/charts/__snapshots__/HorizontalBarChart.test.tsx.snap
index b577a07b..bd48a908 100644
--- a/test/visits/charts/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/test/visits/charts/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -483,7 +483,7 @@ exports[`<HorizontalBarChart /> > renders expected charts and tooltip 1`] = `
     >
       <div
         class="recharts-default-tooltip"
-        style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+        style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
       >
         <p
           class="recharts-tooltip-label"
@@ -996,7 +996,7 @@ exports[`<HorizontalBarChart /> > renders expected charts and tooltip 2`] = `
     >
       <div
         class="recharts-default-tooltip"
-        style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+        style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
       >
         <p
           class="recharts-tooltip-label"
@@ -1566,7 +1566,7 @@ exports[`<HorizontalBarChart /> > renders expected charts and tooltip 3`] = `
     >
       <div
         class="recharts-default-tooltip"
-        style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+        style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
       >
         <p
           class="recharts-tooltip-label"
@@ -2136,7 +2136,7 @@ exports[`<HorizontalBarChart /> > renders expected charts and tooltip 4`] = `
     >
       <div
         class="recharts-default-tooltip"
-        style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+        style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
       >
         <p
           class="recharts-tooltip-label"
@@ -2727,7 +2727,7 @@ exports[`<HorizontalBarChart /> > renders expected charts and tooltip 5`] = `
     >
       <div
         class="recharts-default-tooltip"
-        style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+        style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
       >
         <p
           class="recharts-tooltip-label"
@@ -3297,7 +3297,7 @@ exports[`<HorizontalBarChart /> > renders expected charts and tooltip 6`] = `
     >
       <div
         class="recharts-default-tooltip"
-        style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+        style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
       >
         <p
           class="recharts-tooltip-label"
diff --git a/test/visits/charts/__snapshots__/LineChartCard.test.tsx.snap b/test/visits/charts/__snapshots__/LineChartCard.test.tsx.snap
index c2e3a72b..0e4821d9 100644
--- a/test/visits/charts/__snapshots__/LineChartCard.test.tsx.snap
+++ b/test/visits/charts/__snapshots__/LineChartCard.test.tsx.snap
@@ -192,7 +192,7 @@ exports[`<LineChartCard /> > renders chart with expected data 1`] = `
         >
           <div
             class="recharts-default-tooltip"
-            style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+            style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
           >
             <p
               class="recharts-tooltip-label"
@@ -398,7 +398,7 @@ exports[`<LineChartCard /> > renders chart with expected data 2`] = `
         >
           <div
             class="recharts-default-tooltip"
-            style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+            style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
           >
             <p
               class="recharts-tooltip-label"
@@ -999,7 +999,7 @@ exports[`<LineChartCard /> > renders chart with expected data 3`] = `
         >
           <div
             class="recharts-default-tooltip"
-            style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+            style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
           >
             <p
               class="recharts-tooltip-label"
@@ -1614,7 +1614,7 @@ exports[`<LineChartCard /> > renders chart with expected data 4`] = `
         >
           <div
             class="recharts-default-tooltip"
-            style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+            style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
           >
             <p
               class="recharts-tooltip-label"
@@ -2768,7 +2768,7 @@ exports[`<LineChartCard /> > renders chart with expected data 5`] = `
         >
           <div
             class="recharts-default-tooltip"
-            style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); white-space: nowrap; color: white; border-radius: 5px;"
+            style="margin: 0px; padding: 10px; white-space: nowrap; color: white; background: rgba(0, 0, 0, 0.9); border-radius: 5px;"
           >
             <p
               class="recharts-tooltip-label"