diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1ff2ea87..67dc3292 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,7 +8,7 @@
       "name": "giant-ui",
       "version": "0.1.0",
       "dependencies": {
-        "@elastic/charts": "57.0.0",
+        "@elastic/charts": "66.1.0",
         "@elastic/datemath": "^5.0.3",
         "@elastic/eui": "77.2.0",
         "@emotion/css": "^11.11.2",
@@ -2494,13 +2494,13 @@
       }
     },
     "node_modules/@elastic/charts": {
-      "version": "57.0.0",
-      "resolved": "https://registry.npmjs.org/@elastic/charts/-/charts-57.0.0.tgz",
-      "integrity": "sha512-MBfPsRasEJX+OsbFk6DWEbajyKPb3aCYh5FBdvsvoIea4m76pFPjG4N0gZarRHTkkDTv6h+hiSjya0pkkyaqgA==",
+      "version": "66.1.0",
+      "resolved": "https://registry.npmjs.org/@elastic/charts/-/charts-66.1.0.tgz",
+      "integrity": "sha512-oiNsCFfuqZCrDMmPX8RlGEtULhddOJFkN8pxNavD9x9JIwSB6R0gaw29aWJxwnUeROwq241yDijaOpXmIo/lQQ==",
       "dependencies": {
-        "@popperjs/core": "^2.4.0",
+        "@popperjs/core": "^2.11.8",
         "bezier-easing": "^2.1.0",
-        "chroma-js": "^2.1.0",
+        "chroma-js": "^2.4.2",
         "classnames": "^2.2.6",
         "d3-array": "^1.2.4",
         "d3-cloud": "^1.2.5",
@@ -2514,7 +2514,6 @@
         "react-redux": "^7.1.0",
         "redux": "^4.0.4",
         "reselect": "^4.0.0",
-        "resize-observer-polyfill": "^1.5.1",
         "ts-debounce": "^4.0.0",
         "utility-types": "^3.10.0",
         "uuid": "^9"
@@ -18938,11 +18937,6 @@
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
       "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
     },
-    "node_modules/resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f1cb5753..f5168f3c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@elastic/charts": "57.0.0",
+    "@elastic/charts": "66.1.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "77.2.0",
     "@emotion/css": "^11.11.2",
diff --git a/frontend/src/js/components/SearchResults/visualizations/TimeHistogram.js b/frontend/src/js/components/SearchResults/visualizations/TimeHistogram.js
index cffdfacd..b38b209e 100644
--- a/frontend/src/js/components/SearchResults/visualizations/TimeHistogram.js
+++ b/frontend/src/js/components/SearchResults/visualizations/TimeHistogram.js
@@ -94,6 +94,11 @@ export default class TimeHistogram extends React.Component {
                     <EuiSettings
                         showLegend={false}
                         onElementClick={(event) => queryByDate(event[0][0].datum)}
+                        theme={{
+                            background: {
+                                color: "transparent"
+                            }                   
+                        }}
                     />
                     <Tooltip
                         headerFormatter={(tooltipData) => {