move legend to the right of the graph

components/StackedBarGraph.module.css

@@ -1,12 +1,16 @@
+.container {
+  position: relative;
+}
+
 .barStack:hover {
   filter: drop-shadow(0 0 calc(4rem / 16) var(--label));
 }
 
 .legend {
-  position: relative;
+  position: absolute;
   display: flex;
-  justify-content: center;
   font-size: 16px;
+  top: 0;
 }
 
 .toolTip {

components/StackedBarGraph.tsx

@@ -45,11 +45,18 @@ export type StackedBarProps = {
   numTicksLeftAxis?: number;
   /** Distance between the left axis labels and the start of the lines of the graph, in px. */
   valueAxisLeftOffset?: 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. */
   strokeDashArray?: string;
+  /** Padding between each bar in the stacked bar graph, from 0 to 1 */
   scalePadding?: number;
+  /** Margin for each item in the legend */
+  itemMargin?: string;
 };
 
 const tooltipStyles = {
@@ -73,6 +80,9 @@ export function StackedBarGraph({
   valueAxisLeftOffset = 40,
   strokeWidth = 2.5,
   strokeDashArray = "10,4",
+  legendLeftOffset = 40,
+  legendTopOffset = 40,
+  itemMargin = "15px 0 0 0",
 }: StackedBarProps) {
   const yTotals = data.reduce((allTotals, currCategory) => {
     const yTotal = keys.reduce((categoryTotal, k) => {
@@ -125,7 +135,7 @@ export function StackedBarGraph({
   yScale.range([yMax, 0]);
 
   return width < 10 ? null : (
-    <div>
+    <div className={styles.container}>
       <svg ref={containerRef} width={width} height={height}>
         <Group top={margin.top} left={margin.left}>
           <GridRows
@@ -228,11 +238,14 @@ export function StackedBarGraph({
           />
         </Group>
       </svg>
-      <div className={styles.legend} style={{ width: width }}>
+      <div
+        className={styles.legend}
+        style={{ left: width + legendLeftOffset, top: legendTopOffset }}
+      >
         <LegendOrdinal
           scale={colorScale}
-          direction="row"
-          labelMargin="0 15px 0 0"
+          direction="column"
+          itemMargin={itemMargin}
         />
       </div>