fix visual nits

components/StackedBarGraph.module.css

@@ -14,11 +14,21 @@
 }
 
 .toolTip {
-  padding: 10px 0;
+  font-family: "Inconsolata", monospace;
+  font-weight: bold;
+  top: 0;
+  left: 0;
+  position: absolute;
+  background-color: var(--label);
+  color: var(--primary-background);
+  pointer-events: none;
+  border-radius: calc(10rem / 16);
+  padding: calc(10rem / 16);
 }
 
 .toolTip p {
   margin: 0 5px;
+  font-size: calc(16rem / 16);
 }
 
 .key {

components/StackedBarGraph.tsx

@@ -59,13 +59,6 @@ export type StackedBarProps = {
   itemMargin?: string;
 };
 
-const tooltipStyles = {
-  ...defaultStyles,
-  minWidth: 60,
-  backgroundColor: Color.primaryAccentLighter,
-  color: Color.primaryBackground,
-};
-
 let tooltipTimeout: number;
 
 export function StackedBarGraph({
@@ -151,7 +144,7 @@ export function StackedBarGraph({
           <GridColumns
             scale={xScale}
             height={yMax}
-            left={valueAxisLeftOffset}
+            left={xScale.bandwidth() / 2}
             offset={xScale.bandwidth() / 2}
             stroke={Color.tertiaryBackground}
             strokeWidth={strokeWidth}
@@ -211,7 +204,7 @@ export function StackedBarGraph({
           <AxisBottom
             top={yMax}
             scale={xScale}
-            left={valueAxisLeftOffset / 5}
+            left={xScale.bandwidth() / 6}
             hideTicks
             hideAxisLine
             labelProps={{
@@ -224,6 +217,7 @@ export function StackedBarGraph({
           />
           <AxisLeft
             scale={yScale}
+            top={5}
             numTicks={numTicksLeftAxis}
             hideAxisLine
             labelProps={{
@@ -254,7 +248,7 @@ export function StackedBarGraph({
           className={styles.toolTip}
           top={tooltipTop}
           left={tooltipLeft}
-          style={tooltipStyles}
+          unstyled
         >
           <p className={styles.key}>{tooltipData.key}</p>
           <p>{tooltipData.bar.data[tooltipData.key]}</p>