diff --git a/app/charts/bar/bars-stacked-state.tsx b/app/charts/bar/bars-stacked-state.tsx
index 1fdbc5f40..cf66703eb 100644
--- a/app/charts/bar/bars-stacked-state.tsx
+++ b/app/charts/bar/bars-stacked-state.tsx
@@ -412,7 +412,7 @@ const useBarsStackedState = (
   yScale.range([0, chartHeight]);
   yScaleInteraction.range([0, chartHeight]);
   yScaleTimeRange.range([0, chartHeight]);
-  xScale.range([chartWidth, 0]);
+  xScale.range([0, chartWidth]);
 
   const isMobile = useIsMobile();
 
diff --git a/app/charts/bar/bars-stacked.tsx b/app/charts/bar/bars-stacked.tsx
index 72a5bb3ae..e7a61b793 100644
--- a/app/charts/bar/bars-stacked.tsx
+++ b/app/charts/bar/bars-stacked.tsx
@@ -25,9 +25,9 @@ export const BarsStacked = () => {
         return {
           key: getRenderingKey(observation, d.key),
           y: yScale(getY(observation)) as number,
-          x: xScale(segment[1]),
+          x: xScale(segment[0]),
           height: bandwidth,
-          width: Math.max(0, xScale(segment[0]) - xScale(segment[1])),
+          width: Math.min(0, xScale(segment[0]) - xScale(segment[1])) * -1,
           color,
         };
       });