From 58b9a425401e53d4b2812903b619ecb1680f0c84 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 20 Oct 2026 20:09:54 +0200
Subject: [PATCH 1/6] fix: preserve download chart gaps when data is
 interpolated  and highlight missing data

---
 app/components/Chart/SplitSparkline.vue       | 16 ++---
 app/components/Package/TrendsChart.vue        | 43 +++++++++---
 app/utils/chart-data-prediction.ts            | 52 ++++++++++-----
 server/utils/embed-downloads-svg.ts           | 31 ++++++++-
 shared/utils/download-chart-gaps.ts           | 51 ++++++++++++++
 shared/utils/trends-chart.ts                  | 16 +++--
 .../app/utils/chart-data-pipeline.spec.ts     | 57 ++++++++++++++++
 .../server/utils/embed-downloads-svg.spec.ts  | 30 ++++++++-
 .../shared/utils/download-chart-gaps.spec.ts  | 42 ++++++++++++
 test/unit/shared/utils/trends-chart.spec.ts   | 66 +++++++++++++++----
 10 files changed, 344 insertions(+), 60 deletions(-)
 create mode 100644 shared/utils/download-chart-gaps.ts
 create mode 100644 test/unit/app/utils/chart-data-pipeline.spec.ts
 create mode 100644 test/unit/shared/utils/download-chart-gaps.spec.ts

diff --git a/app/components/Chart/SplitSparkline.vue b/app/components/Chart/SplitSparkline.vue
index 9cb6761efd..6f0f0af9da 100644
--- a/app/components/Chart/SplitSparkline.vue
+++ b/app/components/Chart/SplitSparkline.vue
@@ -18,7 +18,7 @@ const props = defineProps<{
   dataset?: Array<
     VueUiXyDatasetItem & {
       color?: string
-      series: number[]
+      series: Array<number | null>
       dashIndices?: number[]
     }
   >
@@ -29,7 +29,6 @@ const props = defineProps<{
     day: string
   }
   showLastDatapointEstimation: boolean
-  nullifyZeroValues?: boolean
   largePackageSeries?: boolean[]
   granularity: ChartTimeGranularity
 }>()
@@ -124,14 +123,7 @@ const datasets = computed<VueUiSparklineDatasetItem[][]>(() => {
 
       return {
         period,
-        value:
-          rawValue === 0
-            ? props.nullifyZeroValues && hasNoDataTail
-              ? index === props.dates.length - 1
-                ? 0
-                : null
-              : 0
-            : rawValue || (index === props.dates.length - 1 ? 0 : null),
+        value: rawValue ?? null,
       }
     })
   })
@@ -234,9 +226,9 @@ const configs = computed(() => {
           strokeWidth: 1,
           dashIndices,
           dashArray: 3,
-          cutNullValues: false,
+          cutNullValues: true,
           nullDashes: {
-            show: true,
+            show: false,
           },
         },
         plot: {
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index ceda0bfceb..d65be663dd 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -23,13 +23,13 @@ import {
   buildTrendsChartData,
   isWeeklyDataset,
   getTrendsDatetimeFormatterOptions,
-  nullifyZeroValues,
   isMissingDownloadValue,
   isLargeDownloadSeries,
   MULTI_PACKAGE_MODE_TOP_PADDING,
 } from '#shared/utils/trends-chart'
 import { downloadFileLink } from '~/utils/download'
 import { useCopyChartPng } from '~/composables/useCopyChartPng'
+import { getDownloadChartGaps } from '#shared/utils/download-chart-gaps'
 import { createLastDatapointLabelsSvg } from '#shared/utils/download-chart-last-label'
 
 import('vue-data-ui/style.css')
@@ -72,6 +72,7 @@ const { copy, copied } = useClipboard()
 
 const colorMode = useColorMode()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
+const gapPatternId = useId()
 const rootEl = shallowRef<HTMLElement | null>(null)
 const isZoomed = shallowRef(false)
 const zoomStartIndex = shallowRef(0)
@@ -200,17 +201,11 @@ const normalisedDataset = computed(() => {
   data.forEach((item, index) => {
     const packageName = getPackageNameForSeriesIndex(index)
 
-    item.series = nullifyZeroValues({
-      enabled: selectedMetric.value === DEFAULT_METRIC_ID && isLargePackage.value[packageName],
-      values: item.series,
-      keepLastZero: false,
-    }) as number[]
-
     if (selectedMetric.value !== DEFAULT_METRIC_ID || !item.series.length) return
 
     const rawLastValue = chartData.value.dataset?.[index]?.series?.at(-1)
 
-    if (!isLargePackage.value[packageName] && isMissingDownloadValue(rawLastValue)) {
+    if (!isLargePackage.value[packageName] && rawLastValue === 0) {
       const series = item.series as Array<number | null>
       series[series.length - 1] = 0
     }
@@ -1909,7 +1904,6 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
             :dates="chartData.dates"
             :datetimeFormatterOptions
             :showLastDatapointEstimation="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd"
-            :nullify-zero-values="selectedMetric === DEFAULT_METRIC_ID"
             :granularity="selectedGranularity"
             :large-package-series="largePackageSeries"
           />
@@ -1944,6 +1938,37 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
 
             <!-- Injecting custom svg elements -->
             <template #svg="{ svg }">
+              <g v-if="!pending && isDownloadsMetric" pointer-events="none" aria-hidden="true">
+                <template v-for="(gap, index) in getDownloadChartGaps(svg)" :key="index">
+                  <defs>
+                    <pattern
+                      :id="`${gapPatternId}-${index}`"
+                      width="6"
+                      height="6"
+                      patternUnits="userSpaceOnUse"
+                      patternTransform="rotate(45)"
+                    >
+                      <line
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="10"
+                        :stroke="colors.borderHover"
+                        stroke-width="5"
+                      />
+                    </pattern>
+                  </defs>
+                  <rect
+                    :x="gap.x"
+                    :y="gap.y"
+                    :width="gap.width"
+                    :height="gap.height"
+                    :fill="`url(#${gapPatternId}-${index})`"
+                    opacity="0.45"
+                  />
+                </template>
+              </g>
+
               <!-- Estimation lines for monthly & yearly granularities when the end date induces a downwards trend -->
               <g
                 v-if="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd && !isZoomed"
diff --git a/app/utils/chart-data-prediction.ts b/app/utils/chart-data-prediction.ts
index 5608073764..0775c244b1 100644
--- a/app/utils/chart-data-prediction.ts
+++ b/app/utils/chart-data-prediction.ts
@@ -148,28 +148,44 @@ export interface DataPipelineContext {
  * 2. Data correction – smoothing & averaging
  */
 export function applyDataPipeline(
-  series: number[],
+  series: Array<number | null>,
   settings: DataPipelineSettings,
   ctx: DataPipelineContext,
-): number[] {
+): Array<number | null> {
   if (series.length === 0) return series
 
-  // Step 1: prediction
-  let s = series
-  if (!ctx.isAbsoluteMetric) {
-    const projected = extrapolateLastValue({
-      series,
-      granularity: ctx.granularity,
-      lastDateMs: ctx.lastDateMs,
-      referenceMs: ctx.referenceMs,
-      predictionPoints: settings.predictionPoints,
+  // Keep gaps at their original indices and process each continuous run independently.
+  const result = [...series]
+  let start = 0
+  while (start < series.length) {
+    if (series[start] === null) {
+      start += 1
+      continue
+    }
+
+    let end = start
+    while (end < series.length && series[end] !== null) end += 1
+    const run = series.slice(start, end) as number[]
+
+    // Only the run containing the final bucket can have a partial endpoint.
+    if (end === series.length && !ctx.isAbsoluteMetric) {
+      run[run.length - 1] = extrapolateLastValue({
+        series: run,
+        granularity: ctx.granularity,
+        lastDateMs: ctx.lastDateMs,
+        referenceMs: ctx.referenceMs,
+        predictionPoints: settings.predictionPoints,
+      })
+    }
+
+    const corrected = applyDataCorrection(
+      run.map(value => ({ value })),
+      settings,
+    )
+    corrected.forEach((point, index) => {
+      result[start + index] = point.value
     })
-    s = [...series.slice(0, -1), projected]
+    start = end
   }
-
-  // Step 2: smoothing & averaging
-  return applyDataCorrection(
-    s.map(value => ({ value })),
-    settings,
-  ).map(d => d.value)
+  return result
 }
diff --git a/server/utils/embed-downloads-svg.ts b/server/utils/embed-downloads-svg.ts
index c9f602da07..36cb3b1b64 100644
--- a/server/utils/embed-downloads-svg.ts
+++ b/server/utils/embed-downloads-svg.ts
@@ -1,3 +1,5 @@
+import { randomUUID } from 'node:crypto'
+import { getDownloadChartGaps } from '#shared/utils/download-chart-gaps'
 import { createError } from 'h3'
 import { createStaticVueUiXy } from 'vue-data-ui/ssr/vue-ui-xy'
 import { mergeConfigs } from 'vue-data-ui/utils'
@@ -342,7 +344,7 @@ export async function createDownloadsSvgResponse(query: QueryParameters): Promis
     const rawLastValue = chartData.dataset?.[index]?.series?.at(-1)
     if (!item.series.length || !isMissingDownloadValue(rawLastValue)) return
 
-    if (!isLargePackageByIndex[index]) {
+    if (!isLargePackageByIndex[index] && rawLastValue === 0) {
       const series = item.series as Array<number | null>
       series[series.length - 1] = 0
     }
@@ -451,6 +453,32 @@ export async function createDownloadsSvgResponse(query: QueryParameters): Promis
     config,
     additionalSvgContent: ({ series, drawingArea }) => {
       const renderedSeries = series as RenderedSeries[]
+      const gapPatternId = `download-gaps-${randomUUID()}`
+      const gapRectangles = getDownloadChartGaps({
+        drawingArea,
+        data: renderedSeries.map(serie => ({
+          color: serie.color ?? colors.fg,
+          isSegregated: serie.isSegregated === true,
+          plots: serie.plots?.map(plot => ({ x: Number(plot.x), value: plot.value })),
+        })),
+      })
+        .map((gap, index) => {
+          const patternId = `${gapPatternId}-${index}`
+          const stroke = colors.border.replace(
+            /[&<>"']/g,
+            character => `&#${character.charCodeAt(0)};`,
+          )
+          return `
+          <defs>
+            <pattern id="${patternId}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+              <line x1="0" y1="0" x2="0" y2="10" stroke="${stroke}" stroke-width="5" />
+            </pattern>
+          </defs>
+          <rect x="${gap.x}" y="${gap.y}" width="${gap.width}" height="${gap.height}" fill="url(#${patternId})" opacity="0.45" pointer-events="none" aria-hidden="true" />
+        `
+        })
+        .join('')
+
       const noDataGeometries = getNoDataTailGeometries({
         series: renderedSeries,
         isLargePackageByIndex,
@@ -532,6 +560,7 @@ export async function createDownloadsSvgResponse(query: QueryParameters): Promis
 
       return `
           <style>text {font-family:monospace;}</style>
+          ${gapRectangles}
           ${noDataTail}
           ${lastRecordedValueLegend}
           ${lastPlotValues}
diff --git a/shared/utils/download-chart-gaps.ts b/shared/utils/download-chart-gaps.ts
new file mode 100644
index 0000000000..2fa5c01d97
--- /dev/null
+++ b/shared/utils/download-chart-gaps.ts
@@ -0,0 +1,51 @@
+type GapPlot = { x: number; value: unknown }
+
+/**
+ * Cover the empty interval between the valid points on either side of each gap
+ * Used for download charts (TrendsChart as well as the embed ssr variant)
+ */
+export function getDownloadChartGaps({
+  data,
+  drawingArea,
+}: {
+  data: Array<{ color: string; plots?: GapPlot[]; isSegregated?: boolean }>
+  drawingArea: { left: number; right: number; top: number; bottom: number }
+}) {
+  const rectangles: Array<{ x: number; y: number; width: number; height: number; color: string }> =
+    []
+  for (const serie of data) {
+    if (!serie.plots || serie.isSegregated) {
+      continue
+    }
+
+    let index = 0
+
+    while (index < serie.plots.length) {
+      if (serie.plots[index]?.value != null) {
+        index += 1
+        continue
+      }
+
+      const start = index
+
+      while (index < serie.plots.length && serie.plots[index]?.value == null) {
+        index += 1
+      }
+
+      const left = Math.max(drawingArea.left, serie.plots[start - 1]?.x ?? drawingArea.left)
+      const right = Math.min(drawingArea.right, serie.plots[index]?.x ?? drawingArea.right)
+      const height = drawingArea.bottom - drawingArea.top
+
+      if (Number.isFinite(left) && Number.isFinite(right) && right > left && height > 0) {
+        rectangles.push({
+          x: left,
+          y: drawingArea.top,
+          width: right - left,
+          height,
+          color: serie.color,
+        })
+      }
+    }
+  }
+  return rectangles
+}
diff --git a/shared/utils/trends-chart.ts b/shared/utils/trends-chart.ts
index 61ad3b5e01..2219bff095 100644
--- a/shared/utils/trends-chart.ts
+++ b/shared/utils/trends-chart.ts
@@ -257,7 +257,7 @@ export function buildTrendsChartData(options: TrendChartDataOptions): {
       }
     }
 
-    const series = dates.map(timestamp => valueByTimestamp.get(timestamp) ?? 0)
+    const series = dates.map(timestamp => valueByTimestamp.get(timestamp) ?? null)
     const dashIndices = dates
       .map((timestamp, index) => (anomalyTimestamps.has(timestamp) ? index : -1))
       .filter(index => index !== -1)
@@ -281,7 +281,7 @@ export function buildTrendsChartData(options: TrendChartDataOptions): {
 
 type TrendsNormalisedDatasetItem = VueUiXyDatasetItem & {
   color?: string
-  series: number[]
+  series: Array<number | null>
   dashIndices?: number[]
 }
 
@@ -311,11 +311,14 @@ export function buildNormalisedTrendsDataset(options: {
         return value.y
       }
 
-      return 0
+      return null
     })
+    const hasMissingZeros =
+      options.selectedMetric === 'downloads' &&
+      isLargeDownloadSeries(sourceSeries, options.granularity)
 
     const series = applyDataPipeline(
-      sourceSeries,
+      sourceSeries.map(value => (hasMissingZeros && value === 0 ? null : value)),
       {
         averageWindow: options.chartFilter.averageWindow,
         smoothingTau: options.chartFilter.smoothingTau,
@@ -492,8 +495,9 @@ export function buildTrendsChartConfig(
     line: {
       radius: 4,
       useGradient: true,
+      cutNullValues: true,
       nullDashes: {
-        show: true,
+        show: false,
       },
       dot: {
         useSerieColor: true,
@@ -729,7 +733,7 @@ export function nullifyZeroValues({
   // Keeping the last value as zero is required if the chart displays the last value label (if not, the last label would show the last valid value, which can mislead users into thinking the last datapoint is valid)
   keepLastZero?: boolean
 
-  values: number[]
+  values: Array<number | null>
 }) {
   if (!enabled) return values
   return values.map((n, i) => (keepLastZero && i === values.length - 1 ? n : n || null))
diff --git a/test/unit/app/utils/chart-data-pipeline.spec.ts b/test/unit/app/utils/chart-data-pipeline.spec.ts
new file mode 100644
index 0000000000..ca4519fca5
--- /dev/null
+++ b/test/unit/app/utils/chart-data-pipeline.spec.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+import { applyDataPipeline } from '~/utils/chart-data-prediction'
+import { applyDataCorrection } from '~/utils/chart-data-correction'
+
+const settings = { averageWindow: 2, smoothingTau: 3, predictionPoints: 0 }
+const context = {
+  granularity: 'daily' as const,
+  lastDateMs: Date.UTC(2026, 9, 19),
+  referenceMs: Date.UTC(2026, 9, 19, 12),
+  isAbsoluteMetric: false,
+}
+
+describe('gap aware data pipeline', () => {
+  it.each([
+    [null, 100, 200, 100, null, null, 1000, 2000, 1000, null],
+    [100, null, 1000],
+    [null, null],
+    [],
+  ])('preserves gaps for %j', (...series) => {
+    const result = applyDataPipeline(series, settings, context)
+    const expected = series.slice()
+    expect(result.map(value => value === null)).toEqual(series.map(value => value === null))
+    expect(series).toEqual(expected)
+  })
+
+  it('smooths each run without contamination from missing values', () => {
+    const run = [100, 300, 200, 400]
+    const corrected = applyDataCorrection(
+      run.map(value => ({ value })),
+      settings,
+    ).map(p => p.value)
+    expect(applyDataPipeline([...run, null, 9000], settings, context)).toEqual([
+      ...corrected,
+      null,
+      9000,
+    ])
+  })
+
+  it('preserves gaps with filters disabled and keeps genuine zeros', () => {
+    const series = [10, 0, null, 20, null]
+    expect(
+      applyDataPipeline(series, { ...settings, averageWindow: 0, smoothingTau: 0 }, context),
+    ).toEqual(series)
+  })
+
+  it('does not predict a missing final bucket', () => {
+    expect(
+      applyDataPipeline([100, 200, null], { ...settings, predictionPoints: 2 }, context),
+    ).toEqual([100, 200, null])
+  })
+
+  it('uses only the final continuous run for prediction', () => {
+    expect(
+      applyDataPipeline([100, 200, null, 50], { ...settings, predictionPoints: 2 }, context),
+    ).toEqual([100, 200, null, 100])
+  })
+})
diff --git a/test/unit/server/utils/embed-downloads-svg.spec.ts b/test/unit/server/utils/embed-downloads-svg.spec.ts
index 49cd9ddf5d..8c3cb55a40 100644
--- a/test/unit/server/utils/embed-downloads-svg.spec.ts
+++ b/test/unit/server/utils/embed-downloads-svg.spec.ts
@@ -87,6 +87,7 @@ beforeEach(() => {
     bg: '#ffffff',
     fgMuted: '#666666',
     fgSubtle: '#999999',
+    border: '#333333',
   })
 
   mocks.buildTrendsChartData.mockReturnValue({
@@ -143,6 +144,31 @@ beforeEach(() => {
 })
 
 describe('downloads SVG embed response', () => {
+  it.each([false, true])('draws hatched gaps with multiple series: %s', async multipleSeries => {
+    await createDownloadsSvgResponse({ package: 'vue' })
+    const options = mocks.createStaticVueUiXy.mock.calls[0]![0]
+    const content = options.additionalSvgContent({
+      drawingArea: { left: 10, right: 90, top: 20, bottom: 300 },
+      series: [
+        ...(multipleSeries ? [{ color: '#ff0000', plots: [] }] : []),
+        {
+          color: '#42b883',
+          plots: [
+            { x: 10, y: 100, value: 100 },
+            { x: 30, y: 300, value: null },
+            { x: 50, y: 100, value: 200 },
+          ],
+        },
+      ],
+    })
+    expect(content).toContain('patternTransform="rotate(45)"')
+    expect(content).toContain('stroke="#333333"')
+    expect(content).toContain('<rect x="10" y="20" width="40" height="280"')
+    const patternId = content.match(/<pattern id="([^"]+)"/)?.[1]
+    expect(patternId).toBeTruthy()
+    expect(content).toContain(`fill="url(#${patternId})" opacity="0.45"`)
+  })
+
   it('throws 400 when no valid package name is provided', async () => {
     await expect(createDownloadsSvgResponse({})).rejects.toMatchObject({
       statusCode: 400,
@@ -555,7 +581,7 @@ describe('downloads SVG embed response', () => {
     )
   })
 
-  it('restores a missing final value to zero for small packages', async () => {
+  it('preserves an explicitly missing final value for small packages', async () => {
     mocks.isLargeDownloadSeries.mockReturnValue(false)
     mocks.buildTrendsChartData.mockReturnValue({
       dates: ['2026-05-01', '2026-05-02'],
@@ -577,7 +603,7 @@ describe('downloads SVG embed response', () => {
       expect.objectContaining({
         dataset: [
           expect.objectContaining({
-            series: [10, 0],
+            series: [10, null],
           }),
         ],
       }),
diff --git a/test/unit/shared/utils/download-chart-gaps.spec.ts b/test/unit/shared/utils/download-chart-gaps.spec.ts
new file mode 100644
index 0000000000..ff7514d100
--- /dev/null
+++ b/test/unit/shared/utils/download-chart-gaps.spec.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { getDownloadChartGaps } from '#shared/utils/download-chart-gaps'
+
+const drawingArea = { left: 10, right: 90, top: 20, bottom: 120 }
+const plots = (values: Array<number | null>) =>
+  values.map((value, index) => ({ x: 10 + index * 20, value }))
+
+describe('download chart gap covers', () => {
+  it('covers consecutive missing points between valid neighbors', () => {
+    expect(
+      getDownloadChartGaps({
+        drawingArea,
+        data: [{ color: 'green', plots: plots([1, null, null, 2, 3]) }],
+      }),
+    ).toEqual([{ x: 10, y: 20, width: 60, height: 100, color: 'green' }])
+  })
+
+  it('clips leading and trailing gaps to the drawing area', () => {
+    expect(
+      getDownloadChartGaps({
+        drawingArea,
+        data: [{ color: 'green', plots: plots([null, 1, 2, null, null]) }],
+      }),
+    ).toEqual([
+      { x: 10, y: 20, width: 20, height: 100, color: 'green' },
+      { x: 50, y: 20, width: 40, height: 100, color: 'green' },
+    ])
+  })
+
+  it('keeps genuine zeros and ignores hidden or unplotted series', () => {
+    expect(
+      getDownloadChartGaps({
+        drawingArea,
+        data: [
+          { color: 'green', plots: plots([1, 0, 2]) },
+          { color: 'red', isSegregated: true, plots: plots([null, null]) },
+          { color: 'blue' },
+        ],
+      }),
+    ).toEqual([])
+  })
+})
diff --git a/test/unit/shared/utils/trends-chart.spec.ts b/test/unit/shared/utils/trends-chart.spec.ts
index 6ccd132120..fae4fb0542 100644
--- a/test/unit/shared/utils/trends-chart.spec.ts
+++ b/test/unit/shared/utils/trends-chart.spec.ts
@@ -1,3 +1,4 @@
+import { createStaticVueUiXy } from 'vue-data-ui/ssr/vue-ui-xy'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   buildNormalisedTrendsDataset,
@@ -290,13 +291,13 @@ describe('buildTrendsChartData', () => {
     expect(result.dataset).toEqual([
       expect.objectContaining({
         name: 'vue',
-        series: [10, 0],
+        series: [10, null],
         dashIndices: [0],
         color: '#42b883',
       }),
       expect.objectContaining({
         name: 'react',
-        series: [0, 20],
+        series: [null, 20],
         dashIndices: [],
       }),
     ])
@@ -320,12 +321,12 @@ describe('buildTrendsChartData', () => {
     expect(result.dataset).toEqual([
       expect.objectContaining({
         name: 'vue',
-        series: [10, 0],
+        series: [10, null],
         dashIndices: [0],
       }),
       expect.objectContaining({
         name: 'react',
-        series: [0, 20],
+        series: [null, 20],
         dashIndices: [],
       }),
     ])
@@ -349,12 +350,12 @@ describe('buildTrendsChartData', () => {
     expect(result.dataset).toEqual([
       expect.objectContaining({
         name: 'vue',
-        series: [10, 0],
+        series: [10, null],
         dashIndices: [0],
       }),
       expect.objectContaining({
         name: 'react',
-        series: [0, 20],
+        series: [null, 20],
         dashIndices: [],
       }),
     ])
@@ -397,12 +398,12 @@ describe('buildTrendsChartData', () => {
     expect(result.dataset).toEqual([
       expect.objectContaining({
         name: 'vue',
-        series: [10, 0],
+        series: [10, null],
         dashIndices: [0],
       }),
       expect.objectContaining({
         name: 'react',
-        series: [0, 20],
+        series: [null, 20],
         dashIndices: [],
       }),
     ])
@@ -444,7 +445,7 @@ describe('buildTrendsChartData', () => {
       }),
       expect.objectContaining({
         name: 'react',
-        series: [0],
+        series: [null],
       }),
     ])
   })
@@ -536,7 +537,7 @@ describe('buildNormalisedTrendsDataset', () => {
   })
 
   it('normalizes number, object, and invalid values before applying the pipeline', () => {
-    applyDataPipelineMock.mockReturnValue([1, 2, 0])
+    applyDataPipelineMock.mockReturnValue([1, 2, null])
 
     const result = buildNormalisedTrendsDataset({
       dataset: [
@@ -554,7 +555,7 @@ describe('buildNormalisedTrendsDataset', () => {
     })
 
     expect(applyDataPipelineMock).toHaveBeenCalledWith(
-      [1, 2, 0],
+      [1, 2, null],
       {
         averageWindow: 2,
         smoothingTau: 3,
@@ -570,12 +571,31 @@ describe('buildNormalisedTrendsDataset', () => {
 
     expect(result).toEqual([
       expect.objectContaining({
-        series: [1, 2, 0],
+        series: [1, 2, null],
         dashIndices: [],
       }),
     ])
   })
 
+  it.each([
+    ['downloads', [1000, 0, 2000], [1000, null, 2000]],
+    ['downloads', [10, 0, 20], [10, 0, 20]],
+    ['contributors', [1000, 0, 2000], [1000, 0, 2000]],
+  ] as const)('classifies zero values before processing %s', (metric, series, expected) => {
+    buildNormalisedTrendsDataset({
+      dataset: [{ name: 'vue', type: 'line', series: [...series] }],
+      dates: [1, 2, 3],
+      granularity: 'daily',
+      selectedMetric: metric,
+      chartFilter: { averageWindow: 2, smoothingTau: 3 },
+    })
+    expect(applyDataPipelineMock).toHaveBeenCalledWith(
+      expected,
+      expect.anything(),
+      expect.anything(),
+    )
+  })
+
   it('uses Date.now when endDateMs is missing', () => {
     const dateNowSpy = vi.spyOn(Date, 'now').mockReturnValue(999)
 
@@ -660,6 +680,8 @@ describe('buildTrendsChartConfig', () => {
   it('builds a light desktop config with default tooltip behavior', () => {
     const config = buildTrendsChartConfig(baseConfigOptions())
 
+    expect(config.line?.cutNullValues).toBe(true)
+    expect(config.line?.nullDashes?.show).toBe(false)
     expect(config.theme).toBe('')
     expect(config.chart?.height).toBe(400)
     expect(config.chart?.padding?.bottom).toBe(64)
@@ -670,6 +692,26 @@ describe('buildTrendsChartConfig', () => {
     expect(config.chart?.timeTag?.backgroundColor).toBe('#f8f8f8')
   })
 
+  it.each([false, true])('breaks SVG stroke and fill across gaps (smooth: %s)', async smooth => {
+    const svg = await createStaticVueUiXy({
+      dataset: [
+        {
+          name: 'vue',
+          type: 'line',
+          useArea: true,
+          smooth,
+          series: [100, 200, null, 300, 400],
+        },
+      ],
+      config: buildTrendsChartConfig(baseConfigOptions()),
+    })
+    const areas = svg.match(/<g data-layer="line-areas">(.*?)<\/g>/)?.[1] ?? ''
+    const lines = svg.match(/<g data-layer="lines">(.*?)<\/g>/)?.[1] ?? ''
+    expect(areas.match(/<path /g)).toHaveLength(2)
+    // Separate SVG move commands start disconnected stroke segments.
+    expect(lines.match(/M/g)).toHaveLength(2)
+  })
+
   it('falls back to bg when bgElevated is not provided', () => {
     const config = buildTrendsChartConfig({
       ...baseConfigOptions(),

From f5260e43256c7d00746c9fa3e91f01f450bea827 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 20 Oct 2026 20:27:42 +0200
Subject: [PATCH 2/6] fix: exlude gaps from triggering display of the
 estimation legend

---
 app/components/Package/TrendsChart.vue | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index d65be663dd..618c28e803 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -349,10 +349,18 @@ const supportsEstimation = computed(
     selectedMetric.value !== 'contributors',
 )
 
-const hasDownloadAnomalies = computed(() =>
-  normalisedDataset.value?.some(
-    datapoint => !!datapoint?.dashIndices?.length || datapoint?.series?.some(d => d == null),
-  ),
+const hasDashedSegments = computed(() =>
+  normalisedDataset.value.some((datapoint, index) => {
+    if (datapoint.dashIndices?.length) return true
+
+    return (
+      selectedMetric.value === DEFAULT_METRIC_ID &&
+      isLargePackage.value[getPackageNameForSeriesIndex(index)] === true &&
+      datapoint.series.length > 1 &&
+      isMissingDownloadValue(datapoint.series.at(-1)) &&
+      datapoint.series.slice(0, -1).some(value => !isMissingDownloadValue(value))
+    )
+  }),
 )
 
 const shouldRenderEstimationOverlay = computed(() => !pending.value && supportsEstimation.value)
@@ -1257,7 +1265,7 @@ function drawSvgPrintLegend(svg: Record<string, any>) {
   // Inject the estimation legend item when necessary
   if (
     (supportsEstimation.value && !isEndDateOnPeriodEnd.value && !isZoomed.value) ||
-    hasDownloadAnomalies.value
+    hasDashedSegments.value
   ) {
     seriesNames.push(`
         <line
@@ -2076,7 +2084,7 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
                 <!-- Estimation extra legend item -->
                 <div
                   class="flex shrink-0 items-center gap-1 whitespace-nowrap"
-                  v-if="supportsEstimation || hasDownloadAnomalies"
+                  v-if="supportsEstimation || hasDashedSegments"
                 >
                   <svg viewBox="0 0 20 2" width="20" class="shrink-0">
                     <line

From 5cedf1717f1c1036a3c3d148c3dd300a4a2c659d Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 21 Oct 2026 06:30:51 +0200
Subject: [PATCH 3/6] chore(deps): bump vue-data-ui from 3.27.1 to 3.28.1

---
 package.json        |  2 +-
 pnpm-lock.yaml      | 10 +++++-----
 pnpm-workspace.yaml |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index e78260743e..85663c17ef 100644
--- a/package.json
+++ b/package.json
@@ -112,7 +112,7 @@
     "vite-plugin-pwa": "2.0.0",
     "vite-plus": "catalog:vite-plus",
     "vue": "3.5.42",
-    "vue-data-ui": "3.27.1",
+    "vue-data-ui": "3.28.1",
     "vue-router": "5.2.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f03befa2c3..ea91d2796c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -277,8 +277,8 @@ importers:
         specifier: 3.5.42
         version: 3.5.42(typescript-native-bridge@6.0.3-bridge.13.tsgo.7.0.2)
       vue-data-ui:
-        specifier: 3.27.1
-        version: 3.27.1(vue@3.5.42)
+        specifier: 3.28.1
+        version: 3.28.1(vue@3.5.42)
       vue-router:
         specifier: 5.2.0
         version: 5.2.0(@voidzero-dev/vite-plus-core@1.3.0)(@vue/compiler-sfc@3.5.42)(esbuild@0.28.1)(rolldown@1.2.4)(rollup@4.62.2)(vue@3.5.42)(webpack@5.108.4)
@@ -10738,8 +10738,8 @@ packages:
   vue-component-type-helpers@3.3.12:
     resolution: {integrity: sha512-HwCqmgTfLFskQc4P5TRnbduCMyPat2Ezu0elLWOGn0dD/6BKHP15B5bxce6aDi+E4kblPtru8amIBQzu0Di3qQ==}
 
-  vue-data-ui@3.27.1:
-    resolution: {integrity: sha512-eeJ23pqP8+RwDtsHMZ3zIxX0HpkyuIHoXF59pwP0Au/INb5EqoutR9HjzMtANgZ1yKOUQZY70NK5QNq/IwISWA==}
+  vue-data-ui@3.28.1:
+    resolution: {integrity: sha512-7SKMg08iolo/yXh+Hp6a5eXlWKDPogiMo+Eb9F4xgZEsNHvbk8M6kosmroBV+BlTz9PPe5FRhmwNBoCwBfRLAg==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: 3.5.42
@@ -23734,7 +23734,7 @@ snapshots:
 
   vue-component-type-helpers@3.3.12: {}
 
-  vue-data-ui@3.27.1(vue@3.5.42):
+  vue-data-ui@3.28.1(vue@3.5.42):
     dependencies:
       vue: 3.5.42(typescript-native-bridge@6.0.3-bridge.13.tsgo.7.0.2)
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6779586b9e..0086f1fe2d 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -48,7 +48,7 @@ minimumReleaseAgeExclude:
   - '@nuxt/nitro-server@4.5.2'
   - '@nuxt/schema@4.5.2'
   - '@nuxt/vite-builder@4.5.2'
-  - vue-data-ui@3.27.1
+  - vue-data-ui@3.28.1
 
 minimumReleaseAgeExcludePrune: true
 

From 4384bb79b625b2fd993b7e5997818ff3c1236916 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 21 Oct 2026 06:32:23 +0200
Subject: [PATCH 4/6] fix: inject gap rects in the bottom svg layer

---
 app/components/Package/TrendsChart.vue        | 17 ++++++-
 server/utils/embed-downloads-svg.ts           | 19 +++++--
 .../server/utils/embed-downloads-svg.spec.ts  | 49 +++++++++++++------
 3 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 618c28e803..da6cf6bdfa 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1944,8 +1944,8 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
               </p>
             </template>
 
-            <!-- Injecting custom svg elements -->
-            <template #svg="{ svg }">
+            <!-- Injecting custom svg elements on the bottom layer -->
+            <template #svg-underlayer="{ svg }">
               <g v-if="!pending && isDownloadsMetric" pointer-events="none" aria-hidden="true">
                 <template v-for="(gap, index) in getDownloadChartGaps(svg)" :key="index">
                   <defs>
@@ -1974,9 +1974,22 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
                     :fill="`url(#${gapPatternId}-${index})`"
                     opacity="0.45"
                   />
+                  <line
+                    v-for="x in [gap.x, gap.x + gap.width]"
+                    :key="x"
+                    :x1="x"
+                    :x2="x"
+                    :y1="gap.y"
+                    :y2="gap.y + gap.height"
+                    :stroke="colors.borderHover"
+                    stroke-width="0.5"
+                  />
                 </template>
               </g>
+            </template>
 
+            <!-- Injecting custom svg elements on the top layer -->
+            <template #svg="{ svg }">
               <!-- Estimation lines for monthly & yearly granularities when the end date induces a downwards trend -->
               <g
                 v-if="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd && !isZoomed"
diff --git a/server/utils/embed-downloads-svg.ts b/server/utils/embed-downloads-svg.ts
index 36cb3b1b64..f09d4ad33a 100644
--- a/server/utils/embed-downloads-svg.ts
+++ b/server/utils/embed-downloads-svg.ts
@@ -435,7 +435,8 @@ export async function createDownloadsSvgResponse(query: QueryParameters): Promis
     (chartGranularity === 'monthly' && !isLastDayOfMonth(effectiveEndDateIso)) ||
     (chartGranularity === 'yearly' && !isLastDayOfYear(effectiveEndDateIso))
 
-  return await createStaticVueUiXy({
+  let gapUnderlayer = ''
+  const svg = await createStaticVueUiXy({
     dataset: dataset.map((datapoint, index) => {
       const rawLastValue = chartData.dataset?.[index]?.series?.at(-1)
       const hasNoDataTail =
@@ -454,7 +455,7 @@ export async function createDownloadsSvgResponse(query: QueryParameters): Promis
     additionalSvgContent: ({ series, drawingArea }) => {
       const renderedSeries = series as RenderedSeries[]
       const gapPatternId = `download-gaps-${randomUUID()}`
-      const gapRectangles = getDownloadChartGaps({
+      gapUnderlayer = getDownloadChartGaps({
         drawingArea,
         data: renderedSeries.map(serie => ({
           color: serie.color ?? colors.fg,
@@ -475,6 +476,10 @@ export async function createDownloadsSvgResponse(query: QueryParameters): Promis
             </pattern>
           </defs>
           <rect x="${gap.x}" y="${gap.y}" width="${gap.width}" height="${gap.height}" fill="url(#${patternId})" opacity="0.45" pointer-events="none" aria-hidden="true" />
+          <g stroke="${stroke}" stroke-width="0.5" pointer-events="none" aria-hidden="true">
+            <line x1="${gap.x}" x2="${gap.x}" y1="${gap.y}" y2="${gap.y + gap.height}" />
+            <line x1="${gap.x + gap.width}" x2="${gap.x + gap.width}" y1="${gap.y}" y2="${gap.y + gap.height}" />
+          </g>
         `
         })
         .join('')
@@ -560,7 +565,6 @@ export async function createDownloadsSvgResponse(query: QueryParameters): Promis
 
       return `
           <style>text {font-family:monospace;}</style>
-          ${gapRectangles}
           ${noDataTail}
           ${lastRecordedValueLegend}
           ${lastPlotValues}
@@ -568,4 +572,13 @@ export async function createDownloadsSvgResponse(query: QueryParameters): Promis
         `
     },
   })
+
+  // The static renderer only exposes an overlay callback. Insert the gap markup
+  // before the first data layer.
+  return gapUnderlayer
+    ? svg.replace(
+        /<g data-layer="(?:bars|line-areas|lines|plots)"/,
+        match => `${gapUnderlayer}${match}`,
+      )
+    : svg
 }
diff --git a/test/unit/server/utils/embed-downloads-svg.spec.ts b/test/unit/server/utils/embed-downloads-svg.spec.ts
index 8c3cb55a40..eaf356d777 100644
--- a/test/unit/server/utils/embed-downloads-svg.spec.ts
+++ b/test/unit/server/utils/embed-downloads-svg.spec.ts
@@ -1,3 +1,4 @@
+import type { createStaticVueUiXy as StaticRenderer } from 'vue-data-ui/ssr/vue-ui-xy'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createDownloadsSvgResponse } from '../../../../server/utils/embed-downloads-svg'
 
@@ -145,22 +146,27 @@ beforeEach(() => {
 
 describe('downloads SVG embed response', () => {
   it.each([false, true])('draws hatched gaps with multiple series: %s', async multipleSeries => {
-    await createDownloadsSvgResponse({ package: 'vue' })
-    const options = mocks.createStaticVueUiXy.mock.calls[0]![0]
-    const content = options.additionalSvgContent({
-      drawingArea: { left: 10, right: 90, top: 20, bottom: 300 },
-      series: [
-        ...(multipleSeries ? [{ color: '#ff0000', plots: [] }] : []),
-        {
-          color: '#42b883',
-          plots: [
-            { x: 10, y: 100, value: 100 },
-            { x: 30, y: 300, value: null },
-            { x: 50, y: 100, value: 200 },
-          ],
-        },
-      ],
+    mocks.createStaticVueUiXy.mockImplementationOnce(async options => {
+      const overlay = options.additionalSvgContent({
+        drawingArea: { left: 10, right: 90, top: 20, bottom: 300 },
+        series: [
+          ...(multipleSeries ? [{ color: '#ff0000', plots: [] }] : []),
+          {
+            color: '#42b883',
+            plots: [
+              { x: 10, y: 100, value: 100 },
+              { x: 30, y: 300, value: null },
+              { x: 50, y: 100, value: 200 },
+            ],
+          },
+        ],
+      })
+      expect(overlay).not.toContain('<pattern')
+      return `<svg><rect data-background="true"/><g data-layer="line-areas"></g><g data-layer="lines"></g>${overlay}</svg>`
     })
+    const content = await createDownloadsSvgResponse({ package: 'vue' })
+    expect(content.indexOf('<pattern')).toBeLessThan(content.indexOf('<g data-layer="line-areas"'))
+    expect(content.indexOf('<pattern')).toBeGreaterThan(content.indexOf('data-background'))
     expect(content).toContain('patternTransform="rotate(45)"')
     expect(content).toContain('stroke="#333333"')
     expect(content).toContain('<rect x="10" y="20" width="40" height="280"')
@@ -169,6 +175,19 @@ describe('downloads SVG embed response', () => {
     expect(content).toContain(`fill="url(#${patternId})" opacity="0.45"`)
   })
 
+  it('places gaps before data layers in the actual static renderer output', async () => {
+    const { createStaticVueUiXy } = await vi.importActual<{
+      createStaticVueUiXy: typeof StaticRenderer
+    }>('vue-data-ui/ssr/vue-ui-xy')
+    mocks.createStaticVueUiXy.mockImplementationOnce(createStaticVueUiXy)
+    mocks.buildNormalisedTrendsDataset.mockReturnValue(createDataset({ series: [100, null, 200] }))
+    const svg = await createDownloadsSvgResponse({ package: 'vue' })
+    const patternIndex = svg.indexOf('<pattern')
+    expect(patternIndex).toBeGreaterThan(-1)
+    expect(patternIndex).toBeLessThan(svg.indexOf('<g data-layer="lines"'))
+    expect(svg.match(/<pattern /g)).toHaveLength(1)
+  })
+
   it('throws 400 when no valid package name is provided', async () => {
     await expect(createDownloadsSvgResponse({})).rejects.toMatchObject({
       statusCode: 400,

From ae1b5584b945cd0a64d3592eaac4deac9c02f8a6 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 21 Oct 2026 06:41:21 +0200
Subject: [PATCH 5/6] fix: address coderabbit caution suggestion

---
 app/components/Package/TrendsChart.vue      |  2 +-
 shared/utils/trends-chart.ts                |  2 +-
 test/unit/shared/utils/trends-chart.spec.ts | 55 ++++++++++++++++++---
 3 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index da6cf6bdfa..8d61e65de1 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1098,7 +1098,7 @@ function drawEstimationLine(svg: Record<string, any>) {
 
     const previousPoint = plots.at(-2)
     const lastPoint = plots.at(-1)
-    if (!previousPoint || !lastPoint) continue
+    if (previousPoint?.value == null || lastPoint?.value == null) continue
 
     const stroke = String(serie?.color ?? colors.value.fg)
 
diff --git a/shared/utils/trends-chart.ts b/shared/utils/trends-chart.ts
index 2219bff095..6fc591fe62 100644
--- a/shared/utils/trends-chart.ts
+++ b/shared/utils/trends-chart.ts
@@ -544,7 +544,7 @@ export function drawTrendsEstimationLine(options: {
     const previousPoint = plots.at(-2)
     const lastPoint = plots.at(-1)
 
-    if (!previousPoint || !lastPoint) {
+    if (previousPoint?.value == null || lastPoint?.value == null) {
       continue
     }
 
diff --git a/test/unit/shared/utils/trends-chart.spec.ts b/test/unit/shared/utils/trends-chart.spec.ts
index fae4fb0542..9121711263 100644
--- a/test/unit/shared/utils/trends-chart.spec.ts
+++ b/test/unit/shared/utils/trends-chart.spec.ts
@@ -787,8 +787,8 @@ describe('drawTrendsEstimationLine', () => {
           {
             color: '#ff0000',
             plots: [
-              { x: 1, y: 2 },
-              { x: 3, y: 4 },
+              { x: 1, y: 2, value: 10 },
+              { x: 3, y: 4, value: 20 },
             ],
           },
         ],
@@ -809,12 +809,12 @@ describe('drawTrendsEstimationLine', () => {
         series: [
           {
             plots: [
-              { x: 1, y: 2 },
-              { x: 3, y: 4 },
+              { x: 1, y: 2, value: 10 },
+              { x: 3, y: 4, value: 20 },
             ],
           },
           {
-            plots: [{ x: 1, y: 2 }],
+            plots: [{ x: 1, y: 2, value: 10 }],
           },
           {
             plots: null,
@@ -834,11 +834,11 @@ describe('drawTrendsEstimationLine', () => {
         data: [
           {
             color: '#ff0000',
-            plots: [{ x: 1, y: 2 }, undefined],
+            plots: [{ x: 1, y: 2, value: 10 }, undefined],
           },
           {
             color: '#00ff00',
-            plots: [null, { x: 3, y: 4 }],
+            plots: [null, { x: 3, y: 4, value: 20 }],
           },
         ],
       },
@@ -848,6 +848,47 @@ describe('drawTrendsEstimationLine', () => {
 
     expect(result).toBe('')
   })
+  it.each([
+    [null, 20],
+    [10, null],
+    [null, null],
+  ])('skips null endpoints even when they have rendered coordinates (%s, %s)', (previous, last) => {
+    expect(
+      drawTrendsEstimationLine({
+        svg: {
+          data: [
+            {
+              plots: [
+                { x: 1, y: 0, value: previous },
+                { x: 3, y: 0, value: last },
+              ],
+            },
+          ],
+        },
+        colors,
+        shouldRender: true,
+      }),
+    ).toBe('')
+  })
+
+  it('keeps a genuine zero endpoint', () => {
+    expect(
+      drawTrendsEstimationLine({
+        svg: {
+          data: [
+            {
+              plots: [
+                { x: 1, y: 2, value: 10 },
+                { x: 3, y: 0, value: 0 },
+              ],
+            },
+          ],
+        },
+        colors,
+        shouldRender: true,
+      }),
+    ).toContain('<circle')
+  })
 })
 
 describe('drawTrendsLastDatapointLabel', () => {

From 5644905628bca39a984495c65be2ce137f1ae4e3 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 21 Oct 2026 07:07:42 +0200
Subject: [PATCH 6/6] fix: preserve missing download values in tooltips &
 labels

---
 app/components/Chart/SplitSparkline.vue       |  3 ++-
 app/components/Package/TrendsChart.vue        |  6 ++++--
 server/utils/embed-downloads-svg.ts           |  1 +
 shared/utils/download-chart-last-label.ts     | 12 +++++++++--
 .../server/utils/embed-downloads-svg.spec.ts  |  4 ++--
 .../utils/download-chart-last-label.spec.ts   | 21 +++++++++++++++++++
 6 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/app/components/Chart/SplitSparkline.vue b/app/components/Chart/SplitSparkline.vue
index 6f0f0af9da..9420ea691f 100644
--- a/app/components/Chart/SplitSparkline.vue
+++ b/app/components/Chart/SplitSparkline.vue
@@ -93,12 +93,13 @@ function formatDataLabel(seriesIndex: number, value: number): string {
       }
     }
 
+    if (rawLastValue == null) return $t('package.trends.no_data_short')
     return numberFormatter.value.format(value)
   }
 
   // Hover | kbd interaction: show the actual value at the hovered index
   const rawValue = series[selectedIndex.value]
-  if (isLargeSeries(seriesIndex) && isMissingDownloadValue(rawValue)) {
+  if (rawValue == null || (isLargeSeries(seriesIndex) && isMissingDownloadValue(rawValue))) {
     return $t('package.trends.no_data_short')
   }
 
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 8d61e65de1..3cffb9e4b0 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1209,6 +1209,7 @@ function drawLastDatapointLabel(svg: VueUiXySvgSlotProps['svg']) {
 
   return createLastDatapointLabelsSvg({
     series: labelSeries,
+    missingValueLabel: isDownloadsMetric.value ? $t('package.trends.no_data_short') : undefined,
     drawingArea: svg.drawingArea,
     svgWidth: svg.width,
     fontSize: 20,
@@ -1444,8 +1445,9 @@ const chartConfig = computed<VueUiXyConfig>(() => {
                 : datapoint?.value
               const isNoDataValue =
                 selectedMetric.value === DEFAULT_METRIC_ID &&
-                isLargePackage.value[packageName] === true &&
-                isMissingDownloadValue(rawDataValue)
+                (rawDataValue == null ||
+                  (isLargePackage.value[packageName] === true &&
+                    isMissingDownloadValue(rawDataValue)))
               const rawValue = Number(datapoint?.value ?? 0)
               const value = isNoDataValue
                 ? $t('package.trends.no_data_short')
diff --git a/server/utils/embed-downloads-svg.ts b/server/utils/embed-downloads-svg.ts
index f09d4ad33a..df9a839612 100644
--- a/server/utils/embed-downloads-svg.ts
+++ b/server/utils/embed-downloads-svg.ts
@@ -529,6 +529,7 @@ export async function createDownloadsSvgResponse(query: QueryParameters): Promis
 
       const lastPlotValues = createLastDatapointLabelsSvg({
         series: labelSeries,
+        missingValueLabel: 'No data',
         drawingArea,
         colors: {
           foreground: colors.fg,
diff --git a/shared/utils/download-chart-last-label.ts b/shared/utils/download-chart-last-label.ts
index d6a8336469..18055a2b6c 100644
--- a/shared/utils/download-chart-last-label.ts
+++ b/shared/utils/download-chart-last-label.ts
@@ -7,6 +7,7 @@ export function createLastDatapointLabelsSvg({
   drawingArea,
   colors,
   formatValue,
+  missingValueLabel,
   isDarkMode,
   fontSize = 20,
   labelOffset = 24,
@@ -20,6 +21,7 @@ export function createLastDatapointLabelsSvg({
   }
   colors: LastDatapointLabelColors
   formatValue: (value: number) => string
+  missingValueLabel?: string
   isDarkMode: boolean
   svgWidth?: number
   fontSize?: number
@@ -36,12 +38,18 @@ export function createLastDatapointLabelsSvg({
     .map(serie => {
       if (!serie.plots) return null
       const nonNullPlots = serie.plots.filter(p => p.value != null)
-      const lastPlot = Array.isArray(serie.plots) ? nonNullPlots.at(-1) : null
+      const endpoint = serie.plots.at(-1)
+      const isMissingEndpoint =
+        endpoint != null && endpoint.value == null && missingValueLabel !== undefined
+      const lastValidPlot = nonNullPlots.at(-1)
+      const lastPlot = isMissingEndpoint
+        ? { ...endpoint, y: lastValidPlot?.y ?? endpoint.y }
+        : lastValidPlot
       if (!lastPlot) return null
 
       const value = Number(lastPlot.value ?? 0)
       const safeValue = Number.isFinite(value) ? value : 0
-      const text = formatValue(safeValue)
+      const text = isMissingEndpoint ? missingValueLabel : formatValue(safeValue)
 
       return {
         x: Number(lastPlot.x ?? 0),
diff --git a/test/unit/server/utils/embed-downloads-svg.spec.ts b/test/unit/server/utils/embed-downloads-svg.spec.ts
index eaf356d777..5991f1a4f3 100644
--- a/test/unit/server/utils/embed-downloads-svg.spec.ts
+++ b/test/unit/server/utils/embed-downloads-svg.spec.ts
@@ -941,7 +941,7 @@ describe('downloads SVG embed response', () => {
     expect(content).toContain('1.2K')
   })
 
-  it('does not render a last datapoint label when the plot value is missing', async () => {
+  it('renders a no-data label when the plot value is missing', async () => {
     await createDownloadsSvgResponse({
       package: 'vue',
     })
@@ -966,7 +966,7 @@ describe('downloads SVG embed response', () => {
     })
 
     expect(content).toContain('<g data-logo="true" />')
-    expect(content).not.toContain('<text')
+    expect(content).toContain('No data')
   })
 
   it('falls back to en when canonical locales returns an empty array', async () => {
diff --git a/test/unit/shared/utils/download-chart-last-label.spec.ts b/test/unit/shared/utils/download-chart-last-label.spec.ts
index 3921735f88..a10e2bc54f 100644
--- a/test/unit/shared/utils/download-chart-last-label.spec.ts
+++ b/test/unit/shared/utils/download-chart-last-label.spec.ts
@@ -8,6 +8,27 @@ const colors = {
 }
 
 describe('createLastDatapointLabelsSvg', () => {
+  it.each([null, 0])('distinguishes a missing endpoint from zero (%s)', value => {
+    const result = createLastDatapointLabelsSvg({
+      series: [
+        {
+          plots: [
+            { x: 10, y: 20, value: 1234 },
+            { x: 30, y: 100, value },
+          ],
+        },
+      ],
+      drawingArea: { top: 0, height: 120 },
+      colors,
+      formatValue: String,
+      missingValueLabel: 'No data',
+      isDarkMode: false,
+    })
+    expect(result).toMatch(value === null ? /No data/ : />\s*0\s*</)
+    expect(result).not.toContain('1234')
+    expect(result).toContain('x="54"')
+  })
+
   it('returns an empty string when there are no series', () => {
     const result = createLastDatapointLabelsSvg({
       series: [],