diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx
index e4a3351629..36193f4251 100644
--- a/packages/page-referenda/src/Referenda/Referendum.tsx
+++ b/packages/page-referenda/src/Referenda/Referendum.tsx
@@ -141,13 +141,16 @@ function getChartResult (totalEligible: BN, isConvictionVote: boolean, info: Pal
         supx = (supn || supx !== -1) ? supx : i;
       }
 
-      const step = x[1].sub(x[0]);
+      // Bringing it to a higher precision.
+      // Otherwise, graphs with short periods (on dev chains) are invalid.
+      const stepWithPrecision = x[x.length - 1].sub(x[0]).muln(100).divn(x.length);
       const lastIndex = x.length - 1;
       const lastBlock = endConfirm?.add(track.minEnactmentPeriod);
 
       // if the confirmation end is later than shown on our graph, we extend it
       if (lastBlock?.gt(since.add(x[lastIndex]))) {
-        let currentBlock = x[lastIndex].add(since).add(step);
+        let currentBlockWithPrecision = x[lastIndex].add(since).muln(100).add(stepWithPrecision);
+        let currentBlock = currentBlockWithPrecision.divn(100);
 
         do {
           labels.push(formatNumber(currentBlock));
@@ -163,7 +166,8 @@ function getChartResult (totalEligible: BN, isConvictionVote: boolean, info: Pal
           values[1][1].push(values[1][1][lastIndex]);
           values[1][2].push(values[1][2][lastIndex]);
 
-          currentBlock = currentBlock.add(step);
+          currentBlockWithPrecision = currentBlockWithPrecision.add(stepWithPrecision);
+          currentBlock = currentBlockWithPrecision.divn(100);
         } while (currentBlock.lt(lastBlock));
       }
 
diff --git a/packages/page-referenda/src/util.ts b/packages/page-referenda/src/util.ts
index eff9dfa920..a0add1a9f9 100644
--- a/packages/page-referenda/src/util.ts
+++ b/packages/page-referenda/src/util.ts
@@ -227,16 +227,20 @@ export function calcCurves ({ decisionPeriod, minApproval, minSupport }: PalletR
   const approval = new Array<BN>(CURVE_LENGTH);
   const support = new Array<BN>(CURVE_LENGTH);
   const x = new Array<BN>(CURVE_LENGTH);
-  const step = decisionPeriod.divn(CURVE_LENGTH);
   const last = CURVE_LENGTH - 1;
-  let current = new BN(0);
+  // Bringing it to a higher precision before dividing by curve length.
+  // Otherwise, graphs with short periods (on dev chains) are invalid.
+  const stepWithPrecision = decisionPeriod.muln(100).divn(CURVE_LENGTH);
+  let currentWithPrecision = new BN(0);
 
   for (let i = 0; i < last; i++) {
+    const current = currentWithPrecision.divn(100);
+
     approval[i] = curveThreshold(minApproval, current, decisionPeriod);
     support[i] = curveThreshold(minSupport, current, decisionPeriod);
     x[i] = current;
 
-    current = current.add(step);
+    currentWithPrecision = currentWithPrecision.add(stepWithPrecision);
   }
 
   // since we may be lossy with the step, we explicitly calc the final point at 100%