diff --git a/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js b/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
index a72b1bcd0dc999966699ab868875b4e81abef4b9..166069380985ec93e0aeed537d371a9bf0875f94 100644
--- a/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
+++ b/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
@@ -138,13 +138,20 @@ function getXInterval({ settings, series }, xValues) {
 }
 
 function getXAxisProps(props, datas) {
-  const xValues = getXValues(datas);
-
+  const rawXValues = getXValues(datas);
+  const isHistogram = isHistogramBar(props);
+  const xInterval = getXInterval(props, rawXValues);
+
+  // For histograms we add a fake x value one xInterval to the right
+  // This compensates for the barshifting we do align ticks
+  const xValues = isHistogram
+    ? [...rawXValues, Math.max(...rawXValues) + xInterval]
+    : rawXValues;
   return {
-    xValues,
+    isHistogramBar: isHistogram,
     xDomain: d3.extent(xValues),
-    xInterval: getXInterval(props, xValues),
-    isHistogramBar: isHistogramBar(props),
+    xInterval,
+    xValues,
   };
 }
 
diff --git a/frontend/test/metabase/visualizations/components/LineAreaBarRenderer.unit.spec.js b/frontend/test/metabase/visualizations/components/LineAreaBarRenderer.unit.spec.js
index b5c8dbd1aa3f64ee645011d178f8500736ce6319..4b038d9a76b869b45c72dc7affdd671c1f4b1b4a 100644
--- a/frontend/test/metabase/visualizations/components/LineAreaBarRenderer.unit.spec.js
+++ b/frontend/test/metabase/visualizations/components/LineAreaBarRenderer.unit.spec.js
@@ -239,6 +239,32 @@ describe("LineAreaBarRenderer", () => {
     });
   });
 
+  describe("histogram", () => {
+    it("should have one more tick than it has bars", () => {
+      // this is because each bar has a tick on either side
+      renderLineAreaBar(
+        element,
+        [
+          {
+            data: {
+              cols: [NumberColumn(), NumberColumn()],
+              rows: [[1, 1], [2, 2], [3, 1]],
+            },
+            card: {
+              display: "bar",
+              visualization_settings: {
+                "graph.x_axis.axis_enabled": true,
+                "graph.x_axis.scale": "histogram",
+              },
+            },
+          },
+        ],
+        {},
+      );
+      expect(qsa(".axis.x .tick").length).toBe(4);
+    });
+  });
+
   // querySelector shortcut
   const qs = selector => element.querySelector(selector);