From 8eb5d301f776fe1354fb3570ec41eaafae77b5e8 Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Tue, 20 Oct 2026 09:15:27 +0530
Subject: [PATCH] fix: canvas with zero spark line rendering with area under it

---
 web-common/src/components/time-series-chart/Chart.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web-common/src/components/time-series-chart/Chart.svelte b/web-common/src/components/time-series-chart/Chart.svelte
index 26455e2c3299..4c658a363a13 100644
--- a/web-common/src/components/time-series-chart/Chart.svelte
+++ b/web-common/src/components/time-series-chart/Chart.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import RangeDisplay from "@rilldata/web-common/features/dashboards/time-controls/super-pill/components/RangeDisplay.svelte";
   import { MainLineColor } from "@rilldata/web-common/features/dashboards/time-series/chart-colors";
+  import { computeNiceYExtent } from "@rilldata/web-common/features/dashboards/time-series/measure-chart/scales";
   import { portal } from "@rilldata/web-common/lib/actions/portal";
   import { createMeasureValueFormatter } from "@rilldata/web-common/lib/number-formatting/format-measure-value";
   import { TIME_GRAIN } from "@rilldata/web-common/lib/time/config";
@@ -91,7 +92,11 @@
   $: mins = allYExtents.map((extents) => extents[0]).filter(isNumber);
   $: maxes = allYExtents.map((extents) => extents[1]).filter(isNumber);
 
-  $: yExtents = [Math.min(0, min(mins) ?? 0), max(maxes) ?? 0];
+  // No padding: keep the line flush with the top of the sparkline
+  $: yExtents = computeNiceYExtent(min(mins) ?? 0, max(maxes) ?? 0, {
+    includeZero: true,
+    paddingFactor: 1,
+  });
   $: yScale = scaleLinear().domain(yExtents).range([100, 0]);
 
   // Bridge gaps in the data, treating missing data as zero