diff --git a/ts/src/html/graphs.html b/ts/src/html/graphs.html
index cb91994c1..3d17e5f65 100644
--- a/ts/src/html/graphs.html
+++ b/ts/src/html/graphs.html
@@ -2,6 +2,7 @@
 <html>
     <head>
         <meta charset="utf-8" />
+        <meta name="viewport" id="viewport" content="width=device-width" />
     </head>
     <body>
         <div id="main"></div>
diff --git a/ts/src/stats/AxisLabels.svelte b/ts/src/stats/AxisLabels.svelte
new file mode 100644
index 000000000..d59cb6436
--- /dev/null
+++ b/ts/src/stats/AxisLabels.svelte
@@ -0,0 +1,17 @@
+<script lang="typescript">
+    import { GraphBounds } from "./graphs";
+    export let bounds: GraphBounds;
+    export let xText: string;
+    export let yText: string;
+</script>
+
+<text
+    class="axis-label"
+    transform={`translate(${bounds.width / 2}, ${bounds.height - 5})`}>
+    {xText}
+</text>
+<text
+    class="axis-label y-axis-label"
+    transform={`translate(${bounds.marginLeft / 3}, ${(bounds.height - bounds.marginBottom) / 2 + bounds.marginTop}) rotate(-180)`}>
+    {yText}
+</text>
diff --git a/ts/src/stats/AxisTicks.svelte b/ts/src/stats/AxisTicks.svelte
new file mode 100644
index 000000000..c89a61198
--- /dev/null
+++ b/ts/src/stats/AxisTicks.svelte
@@ -0,0 +1,9 @@
+<script lang="typescript">
+    import { GraphBounds } from "./graphs";
+    export let bounds: GraphBounds;
+</script>
+
+<g
+    class="x-ticks no-domain-line"
+    transform={`translate(0,${bounds.height - bounds.marginBottom})`} />
+<g class="y-ticks no-domain-line" transform={`translate(${bounds.marginLeft}, 0)`} />
diff --git a/ts/src/stats/IntervalsGraph.svelte b/ts/src/stats/IntervalsGraph.svelte
index 90344aca6..d2dffdddf 100644
--- a/ts/src/stats/IntervalsGraph.svelte
+++ b/ts/src/stats/IntervalsGraph.svelte
@@ -1,15 +1,16 @@
 <script lang="typescript">
-    import { defaultGraphBounds } from "./graphs";
+    import AxisLabels from "./AxisLabels.svelte";
+    import AxisTicks from "./AxisTicks.svelte";
 
+    import { defaultGraphBounds } from "./graphs";
     import { gatherIntervalData, intervalGraph, IntervalRange } from "./intervals";
     import type { IntervalGraphData } from "./intervals";
-    import { onMount } from "svelte";
     import pb from "../backend/proto";
 
-    const bounds = defaultGraphBounds();
-
     export let data: pb.BackendProto.GraphsOut | null = null;
 
+    const bounds = defaultGraphBounds();
+
     let svg = null as HTMLElement | SVGElement | null;
     let range = IntervalRange.Percentile95;
 
@@ -57,21 +58,7 @@
         <g class="bars" />
         <g class="hoverzone" />
         <path class="area" />
-        <g
-            class="x-ticks no-domain-line"
-            transform={`translate(0,${bounds.height - bounds.marginBottom})`} />
-        <g
-            class="y-ticks no-domain-line"
-            transform={`translate(${bounds.marginLeft}, 0)`} />
-        <text
-            class="axis-label"
-            transform={`translate(${bounds.width / 2}, ${bounds.height - 5})`}>
-            Interval (days)
-        </text>
-        <text
-            class="axis-label y-axis-label"
-            transform={`translate(${bounds.marginLeft / 3}, ${(bounds.height - bounds.marginBottom) / 2 + bounds.marginTop}) rotate(-180)`}>
-            Number of cards
-        </text>
+        <AxisTicks {bounds} />
+        <AxisLabels {bounds} xText="Interval (days)" yText="Number of cards" />
     </svg>
 </div>
diff --git a/ts/src/stats/intervals.ts b/ts/src/stats/intervals.ts
index 56127f733..7470b9843 100644
--- a/ts/src/stats/intervals.ts
+++ b/ts/src/stats/intervals.ts
@@ -134,8 +134,10 @@ export function intervalGraph(
 
     // cumulative area
 
-    const areaData = cumsum(data.map((d) => d.length));
-    const xAreaScale = x.copy().domain([0, areaData.length]);
+    const areaCounts = data.map((d) => d.length);
+    areaCounts.unshift(0);
+    const areaData = cumsum(areaCounts);
+    const xAreaScale = x.copy().domain([0, areaData.length - 1]);
     const yAreaScale = y.copy().domain([0, allIntervals.length]);
 
     svg.select("path.area")
