Get rid of axisLeftOffset

components/StackedBarGraph.tsx

@@ -45,8 +45,6 @@ export type StackedBarProps = {
   margin: { top: number; left: number; right: number; bottom: number };
   /** Number of ticks for the value axis */
   numTicksValueAxis?: number;
-  /** Distance between the the left axis and the left edge of the graph, in px. */
-  axisLeftOffset?: number;
   /** Width of the lines in the graph, in px. */
   strokeWidth?: number;
   /** Length of the dashes and the gaps in the graph, in px. */
@@ -72,7 +70,6 @@ export const StackedBarGraphVertical = withTooltip<
     margin,
     scalePadding = 0.3,
     numTicksValueAxis = 6,
-    axisLeftOffset = 30,
     strokeWidth = 2.5,
     strokeDashArray = "10,4",
     itemMargin = "0 0 0 15px",
@@ -130,7 +127,7 @@ export const StackedBarGraphVertical = withTooltip<
         </div>
 
         <svg width={width} height={height}>
-          <Group top={margin.top} left={margin.left + axisLeftOffset}>
+          <Group top={margin.top} left={margin.left}>
             <GridRows
               scale={valueScale}
               width={xMax}
@@ -213,7 +210,7 @@ export const StackedBarGraphVertical = withTooltip<
           <AxisBottom
             top={yMax + margin.top}
             scale={categoryScale}
-            left={axisLeftOffset}
+            left={margin.left - categoryScale.bandwidth() / 4}
             hideTicks
             hideAxisLine
             labelProps={{
@@ -255,7 +252,6 @@ export const StackedBarGraphHorizontal = withTooltip<
     margin,
     scalePadding = 0.3,
     numTicksValueAxis = 6,
-    axisLeftOffset = 40,
     strokeWidth = 2.5,
     strokeDashArray = "10,4",
     itemMargin = "0 0 0 15px",
@@ -312,7 +308,7 @@ export const StackedBarGraphHorizontal = withTooltip<
         </div>
 
         <svg width={width} height={height}>
-          <Group top={margin.top} left={margin.left + axisLeftOffset}>
+          <Group top={margin.top} left={margin.left}>
             <GridRows
               scale={categoryScale}
               width={xMax}
@@ -401,7 +397,7 @@ export const StackedBarGraphHorizontal = withTooltip<
               tickLabelProps={() => ({
                 fill: Color.label,
                 fontWeight: TICK_LABEL_FONT_WEIGHT,
-                textAnchor: "end",
+                textAnchor: "middle",
               })}
             />
           </Group>

pages/academics.tsx

@@ -253,13 +253,7 @@ export default function Academics() {
             Color.primaryAccentLighter,
           ]}
           data={A12i}
-          axisLeftOffset={80}
-          margin={{
-            top: 20,
-            left: 20,
-            right: 20,
-            bottom: 20,
-          }}
+          margin={{ ...barGraphMargin, ...{ left: 90 } }}
         />
       </ComponentWrapper>
 
@@ -286,12 +280,7 @@ export default function Academics() {
             Color.primaryAccentLighter,
           ]}
           data={A16}
-          margin={{
-            top: 20,
-            left: 20,
-            right: 20,
-            bottom: 20,
-          }}
+          margin={barGraphMargin}
         />
       </ComponentWrapper>
 

pages/coop.tsx

@@ -20,7 +20,12 @@ import {
 import { pageRoutes } from "data/routes";
 import React from "react";
 import { Color } from "utils/Color";
-import { DefaultProp, pieChartProps, wordCloudWidth } from "utils/defaultProps";
+import {
+  barGraphMargin,
+  DefaultProp,
+  pieChartProps,
+  wordCloudWidth,
+} from "utils/defaultProps";
 import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
 
@@ -225,12 +230,7 @@ export default function CoopPage() {
               Color.secondaryAccent,
             ]}
             data={C7v}
-            margin={{
-              top: 20,
-              left: 20,
-              right: 20,
-              bottom: 20,
-            }}
+            margin={barGraphMargin}
           />
         </div>
       </ComponentWrapper>
@@ -255,12 +255,7 @@ export default function CoopPage() {
               Color.primaryText,
             ]}
             data={C7vi}
-            margin={{
-              top: 20,
-              left: 20,
-              right: 20,
-              bottom: 20,
-            }}
+            margin={barGraphMargin}
           />
         </div>
       </ComponentWrapper>
@@ -300,12 +295,7 @@ export default function CoopPage() {
             keys={C7viiiKey}
             colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
             data={C7viii}
-            margin={{
-              top: 20,
-              left: 20,
-              right: 20,
-              bottom: 20,
-            }}
+            margin={barGraphMargin}
           />
         </div>
       </ComponentWrapper>