Stabilize chart axis

src/SupplyVsDemandChart.tsx

@@ -10,7 +10,7 @@ import {
   ResponsiveContainer,
   Tooltip
 } from "recharts";
-import { linspace } from "./utils";
+import { getLinspaceTicks } from "./utils";
 import { useTheme } from "@material-ui/styles";
 
 function SupplyVsDemandChart({
@@ -112,7 +112,7 @@ function SupplyVsDemandChart({
         <CartesianGrid strokeDasharray="3 3" />
         <XAxis
           interval={"preserveStartEnd"}
-          ticks={linspace({ to: to, steps: 4 })}
+          ticks={getLinspaceTicks(data.map(d => d[keyHorizontal]), 4)}
           dataKey={keyHorizontal}
           tickFormatter={formatter}
           unit={unit}
@@ -121,7 +121,7 @@ function SupplyVsDemandChart({
         />
         <YAxis
           interval={"preserveStartEnd"}
-          ticks={linspace({ to: f(to), steps: 3 })}
+          ticks={getLinspaceTicks(data.map(d => d[keyVertical]), 3)}
           tickFormatter={formatter}
           unit={unit}
           tick={{ fill: theme.palette.text.secondary }}
@@ -139,7 +139,7 @@ function SupplyVsDemandChart({
         <ReferenceLine
           x={R0}
           stroke="#90a4ae"
-          strokeDasharray="6 3"
+          strokeDasharray="9 0"
           label={<ReferenceLabel />}
         />
         <Legend formatter={renderColorfulLegendText} />

src/utils.ts

@@ -15,6 +15,20 @@ export function linspace({
   return arr;
 }
 
+/**
+ * Returns a uniform distribution of `num` ticks
+ */
+export function getLinspaceTicks(data: number[], num: number) {
+  const desiredPoints = [];
+  const step = (data[data.length - 1] - data[0]) / num;
+  for (let x = data[0]; x < data[data.length - 1]; x += step) {
+    desiredPoints.push(x);
+  }
+  if (desiredPoints.length < num + 1) desiredPoints.push(data[data.length - 1]);
+
+  return desiredPoints;
+}
+
 /**
  * Returns the last element of an array
  */