Bar chart

app/charts/bar/bars-grouped-state.tsx

@@ -23,7 +23,6 @@ import {
   PADDING_WITHIN,
 } from "@/charts/bar/constants";
 import {
-  useAxisLabelHeightOffset,
   useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
@@ -341,17 +340,11 @@ const useBarsGroupedState = (
       : yTimeRangeDomainLabels,
   });
   const right = 40;
-  const { offset: yAxisLabelMargin } = useAxisLabelHeightOffset({
-    label: xMeasure.label,
-    width,
-    marginLeft: left,
-    marginRight: right,
-  });
   const margins = {
-    top: 50 + yAxisLabelMargin,
+    top: 0,
     right,
     bottom,
-    left,
+    left: 50 + left,
   };
   const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;

app/charts/bar/bars-stacked-state.tsx

@@ -27,7 +27,6 @@ import {
 } from "@/charts/bar/bars-stacked-state-props";
 import { PADDING_INNER, PADDING_OUTER } from "@/charts/bar/constants";
 import {
-  useAxisLabelHeightOffset,
   useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
@@ -401,17 +400,11 @@ const useBarsStackedState = (
     normalize,
   });
   const right = 40;
-  const { offset: yAxisLabelMargin } = useAxisLabelHeightOffset({
-    label: xMeasure.label,
-    width,
-    marginLeft: left,
-    marginRight: right,
-  });
   const margins = {
-    top: 50 + yAxisLabelMargin,
+    top: 0,
     right,
     bottom,
-    left,
+    left: 50 + left,
   };
   const bounds = useChartBounds(width, margins, height);
   const { chartWidth, chartHeight } = bounds;

app/charts/bar/bars-state.tsx

@@ -16,7 +16,6 @@ import {
 } from "@/charts/bar/bars-state-props";
 import { PADDING_INNER, PADDING_OUTER } from "@/charts/bar/constants";
 import {
-  useAxisLabelHeightOffset,
   useChartBounds,
   useChartPadding,
 } from "@/charts/shared/chart-dimensions";
@@ -203,17 +202,12 @@ const useBarsState = (
       : yTimeRangeDomainLabels,
   });
   const right = 40;
-  const { offset: xAxisLabelMargin } = useAxisLabelHeightOffset({
-    label: xMeasure.label,
-    width,
-    marginLeft: left,
-    marginRight: right,
-  });
   const margins = {
-    top: 50 + xAxisLabelMargin,
+    top: 0,
     right,
     bottom,
-    left,
+    //NOTE: hardcoded for the moment
+    left: 50 + left,
   };
 
   const bounds = useChartBounds(width, margins, height);