Clean legend code

components/StackedBarGraph.tsx

@@ -47,10 +47,6 @@ export type StackedBarProps = {
   numTicksValueAxis?: number;
   /** Distance between the the left axis and the left edge of the graph, in px. */
   axisLeftOffset?: number;
-  /** Distance between the right side of the graph and the legend, in px. */
-  legendLeftOffset?: number;
-  /** Distance between the top of the graph and the legend, in px. */
-  legendTopOffset?: number;
   /** Width of the lines in the graph, in px. */
   strokeWidth?: number;
   /** Length of the dashes and the gaps in the graph, in px. */
@@ -79,8 +75,6 @@ export const StackedBarGraphVertical = withTooltip<
     axisLeftOffset = 30,
     strokeWidth = 2.5,
     strokeDashArray = "10,4",
-    legendLeftOffset = 40,
-    legendTopOffset = 40,
     itemMargin = "0 0 0 15px",
     tooltipOpen,
     tooltipLeft,
@@ -126,10 +120,7 @@ export const StackedBarGraphVertical = withTooltip<
 
     return width < 10 ? null : (
       <div className={styles.container}>
-        <div
-          className={styles.legend}
-          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
-        >
+        <div className={styles.legend}>
           <LegendOrdinal
             scale={colorScale}
             direction="row"
@@ -208,6 +199,7 @@ export const StackedBarGraphVertical = withTooltip<
               top={5}
               numTicks={numTicksValueAxis}
               hideAxisLine
+              hideTicks
               labelProps={{
                 fontSize: `${10 / 16}rem`,
               }}
@@ -230,6 +222,7 @@ export const StackedBarGraphVertical = withTooltip<
             tickLabelProps={() => ({
               fill: Color.label,
               fontWeight: TICK_LABEL_FONT_WEIGHT,
+              textAnchor: "middle",
             })}
           />
         </svg>
@@ -265,8 +258,6 @@ export const StackedBarGraphHorizontal = withTooltip<
     axisLeftOffset = 40,
     strokeWidth = 2.5,
     strokeDashArray = "10,4",
-    legendLeftOffset = 40,
-    legendTopOffset = 40,
     itemMargin = "0 0 0 15px",
     tooltipOpen,
     tooltipLeft,
@@ -312,10 +303,7 @@ export const StackedBarGraphHorizontal = withTooltip<
 
     return width < 10 ? null : (
       <div className={styles.container}>
-        <div
-          className={styles.legend}
-          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
-        >
+        <div className={styles.legend}>
           <LegendOrdinal
             scale={colorScale}
             direction="row"