components/LineGraph.module.css

@@ -1,10 +1,3 @@
-.lineText {
-  visibility: hidden;
-  font-family: "Inconsolata", monospace;
-  font-weight: 800;
-  fill: var(--label);
-}
-
 .lineSeries {
   stroke-width: 4;
 }
@@ -20,6 +13,7 @@
 }
 
 .tooltip {
+  text-align: center;
   font-family: "Inconsolata", monospace;
   font-weight: bold;
   top: 0;

components/LineGraph.tsx

@@ -46,7 +46,7 @@ export const LineGraph = ({
   const customTheme = buildChartTheme({
     // colors
     backgroundColor: Color.secondaryBackground, // used by Tooltip, Annotation
-    colors: [Color.primaryAccent, Color.primaryHeading], // categorical colors, mapped to series via `dataKey`s
+    colors: [Color.primaryAccent, Color.secondaryAccent], // categorical colors, mapped to series via `dataKey`s
 
     tickLength: 5,
 
@@ -62,80 +62,72 @@ export const LineGraph = ({
 
   return (
     <>
-      <rect
-        x={0}
-        y={0}
-        width={width}
+      <XYChart
         height={height}
-        fill={Color.primaryBackground}
+        width={width}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        theme={customTheme}
+        margin={margin}
+        xScale={{ type: "band" }}
+        yScale={{ type: "linear" }}
       >
-        <XYChart
-          height={height}
-          width={width}
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          theme={customTheme}
-          margin={margin}
-          xScale={{ type: "band" }}
-          yScale={{ type: "linear" }}
-        >
-          <Axis
-            orientation="bottom"
-            hideAxisLine
-            hideTicks
-            tickLabelProps={() => {
-              return {
-                dy: "0.25rem",
-                fontSize: `${xLabelSize / 16}rem`,
-                className: styles.axisLabel,
-              };
-            }}
+        <Axis
+          orientation="bottom"
+          hideAxisLine
+          hideTicks
+          tickLabelProps={() => {
+            return {
+              dy: "0.25rem",
+              fontSize: `${xLabelSize / 16}rem`,
+              className: styles.axisLabel,
+            };
+          }}
+        />
+        <Axis
+          orientation="left"
+          hideAxisLine
+          hideTicks
+          numTicks={4}
+          tickLabelProps={() => {
+            return {
+              dy: "0.25rem",
+              className: styles.axisLabel,
+              fontSize: `${yLabelSize / 16}rem`,
+            };
+          }}
+        />
+        <Grid
+          numTicks={data[0].length}
+          stroke={Color.label}
+          strokeWidth={4}
+          strokeDasharray="10"
+        />
+        {data.map((d, i) => (
+          <LineSeries
+            enableEvents
+            className={styles.lineSeries} // Why doesn't work???
+            dataKey={lineKey[i]}
+            key={i}
+            data={d}
+            xAccessor={xAccessor}
+            yAccessor={yAccessor}
           />
-          <Axis
-            orientation="left"
-            hideAxisLine
-            hideTicks
-            numTicks={4}
-            tickLabelProps={() => {
-              return {
-                dy: "0.25rem",
-                className: styles.axisLabel,
-                fontSize: `${yLabelSize / 16}rem`,
-              };
-            }}
-          />
-          <Grid
-            numTicks={data[0].length}
-            stroke={Color.label}
-            strokeWidth={4}
-            strokeDasharray="10"
-          />
-          {data.map((d, i) => (
-            <LineSeries
-              enableEvents
-              className={styles.lineSeries} // Why doesn't work???
-              dataKey={lineKey[i]}
-              key={i}
-              data={d}
-              xAccessor={xAccessor}
-              yAccessor={yAccessor}
-            />
-          ))}
+        ))}
 
-          <Tooltip
-            snapTooltipToDatumX
-            snapTooltipToDatumY
-            renderTooltip={({ tooltipData }) => (
-              <div className={styles.tooltip}>
-                <div>{tooltipData?.nearestDatum?.key}</div>
-                <br />
-                {/* {xAccessor(tooltipData.nearestDatum.datum)}
+        <Tooltip
+          snapTooltipToDatumX
+          snapTooltipToDatumY
+          renderTooltip={({ tooltipData }) => (
+            <div className={styles.tooltip}>
+              <div>{tooltipData?.nearestDatum?.key}</div>
+              <br />
+              {/* {xAccessor(tooltipData.nearestDatum.datum)}
                 {": "} */}
-                {yAccessor(tooltipData?.nearestDatum?.datum as LineGraphData)}
-              </div>
-            )}
-          />
-        </XYChart>
-      </rect>
+              {yAccessor(tooltipData?.nearestDatum?.datum as LineGraphData)}
+            </div>
+          )}
+        />
+      </XYChart>
     </>
   );
 };