diff --git a/app/components/Package/TimelineChart.vue b/app/components/Package/TimelineChart.vue
new file mode 100644
index 0000000000..8669383dd4
--- /dev/null
+++ b/app/components/Package/TimelineChart.vue
@@ -0,0 +1,924 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import {
+  VueUiXy,
+  type VueUiXyConfig,
+  type VueUiXyDatasetBarItem,
+  type VueUiXyDatasetItem,
+  type VueUiXyDatasetLineItem,
+  type VueUiXyDatasetPlotItem,
+} from 'vue-data-ui/vue-ui-xy'
+import {
+  sanitise,
+  loadFile,
+  applyEllipsis,
+  copyAltTextForTimelineChart,
+  type EnrichedTimelineSizeCacheEntry,
+  type TimelineSizeCacheValue,
+} from '~/utils/charts'
+import type { TimelineVersion, SubEvent } from '~~/server/api/registry/timeline/[...pkg].get'
+import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
+
+import('vue-data-ui/style.css')
+
+const props = defineProps<{
+  sizeCache: Map<string, TimelineSizeCacheValue>
+  versionSubEvents: Map<string, SubEvent[]>
+  timelineEntries: TimelineVersion[]
+  selectedVersion: string | null
+  loading: boolean
+}>()
+
+const { settings } = useSettings()
+const route = useRoute('timeline')
+const chartRef = useTemplateRef('chartRef')
+const activeVersion = computed(() => route.params.version)
+
+const packageName = computed(() =>
+  route.params.org ? `${route.params.org}/${route.params.packageName}` : route.params.packageName,
+)
+
+function addEvaluationFlags(
+  entries: EnrichedTimelineSizeCacheEntry[],
+  versionSubEvents: Map<string, SubEvent[]>,
+): EnrichedTimelineSizeCacheEntry[] {
+  return entries.map(entry => {
+    const events = versionSubEvents.get(entry.version) ?? []
+
+    return {
+      ...entry,
+      events,
+      hasPositive: events.some(event => event.positive),
+      hasNegative: events.some(event => !event.positive),
+    }
+  })
+}
+
+const convertedData = computed(() => {
+  const entries = props.timelineEntries.flatMap(timelineEntry => {
+    const key = `${packageName.value}@${timelineEntry.version}`
+    const value = props.sizeCache.get(key)
+
+    if (!value) {
+      return []
+    }
+
+    return {
+      name: key,
+      totalSize: value.totalSize,
+      dependencyCount: value.dependencyCount,
+      version: timelineEntry.version,
+      time: timelineEntry.time,
+      license: timelineEntry.license,
+      type: timelineEntry.type,
+      hasTypes: timelineEntry.hasTypes,
+      hasTrustedPublisher: timelineEntry.hasTrustedPublisher,
+      hasProvenance: timelineEntry.hasProvenance,
+      tags: timelineEntry.tags ?? [],
+      events: [],
+      hasPositive: false,
+      hasNegative: false,
+    }
+  })
+
+  return addEvaluationFlags(entries, props.versionSubEvents).toReversed()
+})
+
+watch(
+  convertedData,
+  async () => {
+    await nextTick()
+    chartRef.value?.resetZoom()
+  },
+  { flush: 'post' },
+)
+
+const versions = computed(() => convertedData.value.map(d => d.version))
+
+const activeVersionIndex = computed(() => {
+  if (!activeVersion.value) return -1
+  return versions.value.findIndex(v => v === activeVersion.value)
+})
+
+const seriesTotalSize = computed(() => {
+  const values = convertedData.value.map(d => d.totalSize)
+  if (!values.length) {
+    return { values, min: 0, max: 0 }
+  }
+  return {
+    values,
+    min: Math.min(...values),
+    max: Math.max(...values),
+  }
+})
+
+const seriesDependencies = computed(() => {
+  const values = convertedData.value.map(d => d.dependencyCount)
+  if (!values.length) {
+    return { values, min: 0, max: 0 }
+  }
+  return {
+    values,
+    min: Math.min(...values),
+    max: Math.max(...values),
+  }
+})
+
+type ActiveTab = 'totalSize' | 'dependencyCount'
+const activeTab = shallowRef<ActiveTab>('totalSize')
+
+const e18eGradientColors = [
+  'oklch(73.76% 0.130 47.72)',
+  'oklch(85.35% 0.132 88.65)',
+  'oklch(81.56% 0.145 116.12)',
+  'oklch(71.29% 0.132 136.26)',
+]
+
+function areAllValuesEqual(array: number[]): boolean {
+  if (array.length <= 1) return true
+  return array.every(value => value === array[0])
+}
+
+const datasets = computed<{
+  totalSize: VueUiXyDatasetItem[]
+  dependencyCount: VueUiXyDatasetItem[]
+}>(() => {
+  return {
+    totalSize: [
+      {
+        name: $t('package.stats.install_size'),
+        type: 'line',
+        smooth: true,
+        series: seriesTotalSize.value.values,
+        temperatureColors: areAllValuesEqual(seriesTotalSize.value.values)
+          ? undefined
+          : e18eGradientColors,
+        color: colors.value.fgSubtle,
+        source: convertedData.value,
+      },
+    ],
+    dependencyCount: [
+      {
+        name: $t('compare.dependencies'),
+        type: 'line',
+        smooth: true,
+        series: seriesDependencies.value.values,
+        temperatureColors: areAllValuesEqual(seriesDependencies.value.values)
+          ? undefined
+          : e18eGradientColors,
+        color: colors.value.fgSubtle,
+        source: convertedData.value,
+      },
+    ],
+  }
+})
+
+const { copy, copied } = useClipboard()
+
+const colorMode = useColorMode()
+const resolvedMode = shallowRef<'light' | 'dark'>('light')
+const rootEl = shallowRef<HTMLElement | null>(null)
+const { width } = useElementSize(rootEl)
+
+const compactNumberFormatter = useCompactNumberFormatter()
+const bytesFormatter = useBytesFormatter()
+const intFormatter = useNumberFormatter({
+  notation: 'compact',
+  compactDisplay: 'short',
+  maximumFractionDigits: 0,
+})
+
+const formatter = computed(() =>
+  activeTab.value === 'totalSize' ? bytesFormatter : intFormatter.value,
+)
+
+onMounted(async () => {
+  rootEl.value = document.documentElement
+  resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
+})
+
+const { colors } = useCssVariables(
+  [
+    '--bg',
+    '--fg',
+    '--bg-subtle',
+    '--bg-elevated',
+    '--fg-subtle',
+    '--fg-muted',
+    '--border',
+    '--border-subtle',
+    '--accent',
+  ],
+  {
+    element: rootEl,
+    watchHtmlAttributes: true,
+    watchResize: false,
+  },
+)
+
+watch(
+  () => colorMode.value,
+  value => {
+    resolvedMode.value = value === 'dark' ? 'dark' : 'light'
+  },
+  { flush: 'sync' },
+)
+
+const isDarkMode = computed(() => resolvedMode.value === 'dark')
+
+const watermarkColors = computed(() => ({
+  fg: colors.value.fg ?? OKLCH_NEUTRAL_FALLBACK,
+  bg: colors.value.bg ?? OKLCH_NEUTRAL_FALLBACK,
+  fgSubtle: colors.value.fgSubtle ?? OKLCH_NEUTRAL_FALLBACK,
+}))
+
+const mobileBreakpointWidth = 640
+const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
+
+const commonScaleSteps = computed(() => {
+  if (activeTab.value === 'totalSize') {
+    return seriesTotalSize.value.max - seriesTotalSize.value.min > 5 ? 6 : 2
+  }
+  return seriesDependencies.value.max - seriesDependencies.value.min > 5 ? 6 : 2
+})
+
+const metricLabel = computed(() =>
+  activeTab.value === 'totalSize' ? $t('package.stats.install_size') : $t('compare.dependencies'),
+)
+
+function buildExportFilename(extension: 'png' | 'csv' | 'svg') {
+  return `${sanitise(packageName.value)}_${$t('package.links.timeline')}_${metricLabel.value.toLocaleLowerCase().replaceAll(' ', '-')}.${extension}`
+}
+
+const tooltipPosition = useChartTooltipPosition(chartRef)
+
+const config = computed<VueUiXyConfig>(() => {
+  return {
+    theme: isDarkMode.value ? 'dark' : '',
+    line: {
+      useGradient: false,
+      radius: 2,
+      dot: {
+        useSerieColor: false,
+        fill: colors.value.bg,
+      },
+    },
+    chart: {
+      backgroundColor: colors.value.bg,
+      height: 200,
+      highlighter: {
+        useLine: true,
+        color: colors.value.accent,
+      },
+      grid: {
+        showHorizontalLines: true,
+        stroke: colors.value.border,
+        labels: {
+          color: colors.value.fgSubtle,
+          fontSize: isMobile.value ? 18 : 14,
+          axis: {
+            yLabel: metricLabel.value,
+            fontSize: isMobile.value ? 24 : 14,
+          },
+          xAxisLabels: {
+            color: colors.value.fgSubtle,
+            fontSize: isMobile.value ? 12 : 10,
+            modulo: 24,
+            showOnlyAtModulo: versions.value.length > 24,
+            values: versions.value.map(v => applyEllipsis(v, 20)),
+            rotation: -30,
+            autoRotate: {
+              enable: false,
+            },
+          },
+          yAxis: {
+            commonScaleSteps: commonScaleSteps.value,
+            formatter: ({ value }) => {
+              return formatter.value.format(value ?? 0)
+            },
+            scaleMin: settings.value.timelineChart.isZeroBased
+              ? 0
+              : activeTab.value === 'totalSize'
+                ? seriesTotalSize.value.min
+                : seriesDependencies.value.min,
+            stacked: false,
+            useIndividualScale: false,
+            useNiceScale: true,
+          },
+        },
+      },
+      legend: { show: false },
+      padding: {
+        top: 32,
+      },
+      title: {
+        text: applyEllipsis(packageName.value, 32),
+        fontSize: isMobile.value ? 14 : 18,
+        bold: false,
+        color: colors.value.fg,
+      },
+      tooltip: {
+        position: tooltipPosition.value,
+        offsetX: 24,
+        borderColor: colors.value.border,
+        borderRadius: 6,
+        backgroundColor: colors.value.bg,
+        backgroundOpacity: 10,
+      },
+      userOptions: {
+        buttons: {
+          pdf: false,
+          labels: false,
+          fullscreen: false,
+          table: false,
+          tooltip: false,
+          altCopy: true,
+          annotator: !isMobile.value,
+        },
+        buttonTitles: {
+          csv: $t('package.trends.download_file', { fileType: 'CSV' }),
+          img: $t('package.trends.download_file', { fileType: 'PNG' }),
+          svg: $t('package.trends.download_file', { fileType: 'SVG' }),
+          annotator: $t('package.trends.toggle_annotator'),
+          stack: $t('package.trends.toggle_stack_mode'),
+          altCopy: $t('package.trends.copy_alt.button_label'),
+          open: $t('package.trends.open_options'),
+          close: $t('package.trends.close_options'),
+        },
+        callbacks: {
+          img: args => {
+            const imageUri = args?.imageUri
+            if (!imageUri) return
+            loadFile(imageUri, buildExportFilename('png'))
+          },
+          csv: csvStr => {
+            if (!csvStr) return
+            const PLACEHOLDER_CHAR = '\0'
+            const multilineDateTemplate = $t('package.trends.date_range_multiline', {
+              start: PLACEHOLDER_CHAR,
+              end: PLACEHOLDER_CHAR,
+            })
+              .replaceAll(PLACEHOLDER_CHAR, '')
+              .trim()
+            const blob = new Blob([
+              csvStr
+                .replace('data:text/csv;charset=utf-8,', '')
+                .replaceAll(`\n${multilineDateTemplate}`, ` ${multilineDateTemplate}`),
+            ])
+            const url = URL.createObjectURL(blob)
+            loadFile(url, buildExportFilename('csv'))
+            URL.revokeObjectURL(url)
+          },
+          svg: args => {
+            const blob = args?.blob
+            if (!blob) return
+            const url = URL.createObjectURL(blob)
+            loadFile(url, buildExportFilename('svg'))
+            URL.revokeObjectURL(url)
+          },
+          altCopy: () =>
+            copyAltTextForTimelineChart({
+              dataset: convertedData.value,
+              config: {
+                packageName: packageName.value,
+                metric: activeTab.value,
+                copy,
+                $t,
+                numberFormatter: formatter.value.format,
+              },
+            }),
+        },
+      },
+      zoom: {
+        show: settings.value.timelineChart.showZoom,
+        maxWidth: isMobile.value ? 350 : 500,
+        highlightColor: colors.value.bgElevated,
+        useResetSlot: true,
+        keepState: true,
+        minimap: {
+          show: true,
+          lineColor: '#FAFAFA',
+          indicatorColor: colors.value.accent,
+          selectedColor: colors.value.accent,
+          selectedColorOpacity: 0.06,
+          frameColor: colors.value.border,
+          handleWidth: isMobile.value ? 40 : 20, // does not affect the size of the touch area
+          handleBorderColor: colors.value.fgSubtle,
+          handleType: 'grab', // 'empty' | 'chevron' | 'arrow' | 'grab'
+        },
+        preview: {
+          fill: transparentizeOklch(colors.value.accent, isDarkMode.value ? 0.95 : 0.92),
+          stroke: transparentizeOklch(colors.value.accent, 0.5),
+          strokeWidth: 1,
+          strokeDasharray: 3,
+        },
+      },
+    },
+  }
+})
+
+type TimelineSourceItem = {
+  version?: string
+  tags?: string[]
+  events?: SubEvent[]
+  hasPositive?: boolean
+  hasNegative?: boolean
+}
+
+type TimelinePlotItem = {
+  x: number
+  y: number
+  value?: number
+}
+
+type TimelineMarkerItem = TimelinePlotItem & {
+  key: string
+  offsetY?: number
+}
+
+type TimelineSvgDataItem = VueUiXyDatasetLineItem & {
+  source: TimelineSourceItem[]
+  plots: TimelinePlotItem[]
+}
+
+type TimelineDatasetItem =
+  | VueUiXyDatasetLineItem
+  | VueUiXyDatasetBarItem
+  | VueUiXyDatasetPlotItem
+  | undefined
+
+function getDatapointPlots(
+  item: TimelineDatasetItem,
+  predicate: (datapoint: TimelineSourceItem, index: number) => boolean,
+  markerKey: string,
+  zoomOffset: number,
+): TimelineMarkerItem[] {
+  if (!item || !Array.isArray(item.source) || !Array.isArray(item.plots)) {
+    return []
+  }
+
+  const timelineItem = item as TimelineSvgDataItem
+
+  return timelineItem.source.flatMap((datapoint, index) => {
+    const plotIndex = index - zoomOffset
+    const plot = timelineItem.plots[plotIndex]
+
+    if (plotIndex < 0 || !plot || !predicate(datapoint, index)) {
+      return []
+    }
+
+    const hasPositive = datapoint.hasPositive === true
+    const hasNegative = datapoint.hasNegative === true
+
+    return [
+      {
+        key: `${datapoint.version ?? index}-${markerKey}`,
+        index,
+        x: plot.x,
+        y: plot.y,
+        offsetY: markerKey === 'negative' && hasPositive && hasNegative ? 20 : 0,
+      },
+    ]
+  })
+}
+
+function getActiveVersionDatapointPlot(
+  item: TimelineDatasetItem,
+  zoomOffset: number,
+): TimelinePlotItem | null {
+  return item?.plots?.[activeVersionIndex.value - zoomOffset] ?? null
+}
+
+function getPositiveDatapointPlots(
+  item: TimelineDatasetItem,
+  zoomOffset: number,
+): TimelineMarkerItem[] {
+  return getDatapointPlots(
+    item,
+    datapoint => datapoint.hasPositive === true,
+    'positive',
+    zoomOffset,
+  )
+}
+
+function getNegativeDatapointPlots(
+  item: TimelineDatasetItem,
+  zoomOffset: number,
+): TimelineMarkerItem[] {
+  return getDatapointPlots(
+    item,
+    datapoint => datapoint.hasNegative === true,
+    'negative',
+    zoomOffset,
+  )
+}
+
+const indexSelection = computed(() => {
+  if (props.selectedVersion == null) return null
+  return convertedData.value.findIndex(v => v.version === props.selectedVersion)
+})
+</script>
+
+<template>
+  <div style="width: 100%" class="font-mono border-b border-border" id="timeline-chart">
+    <div class="mt-4 flex flex-row flex-wrap items-center justify-between gap-4">
+      <TabRoot v-model="activeTab" default-value="totalSize">
+        <TabList :ariaLabel="$t('package.timeline.chart.tab_aria_label')">
+          <TabItem value="totalSize" icon="i-lucide:package-open" :controls-panel="false">
+            {{ $t('package.stats.install_size') }}
+          </TabItem>
+          <TabItem value="dependencyCount" icon="i-lucide:network" :controls-panel="false">
+            {{ $t('compare.dependencies') }}
+          </TabItem>
+        </TabList>
+      </TabRoot>
+
+      <div class="flex flex-row flex-wrap gap-4">
+        <SettingsToggle
+          v-model="settings.timelineChart.isZeroBased"
+          :label="$t('package.timeline.chart.base_scale')"
+        />
+        <SettingsToggle
+          v-model="settings.timelineChart.showZoom"
+          :label="$t('package.timeline.chart.zoom')"
+        />
+      </div>
+    </div>
+    <ClientOnly>
+      <VueUiXy
+        ref="chartRef"
+        :dataset="datasets[activeTab]"
+        :config
+        :selected-x-index="indexSelection"
+      >
+        <!-- Custom tooltip -->
+        <template #tooltip="{ timeLabel }">
+          <div class="font-mono text-xs flex flex-col">
+            <div class="border-border border-b pb-2 mb-2 flex flex-col">
+              <div class="flex flex-row gap-4">
+                <span class="text-fg">{{ convertedData[timeLabel.absoluteIndex]?.version }}</span>
+                <span
+                  v-for="tag in convertedData[timeLabel.absoluteIndex]?.tags"
+                  :key="tag"
+                  class="text-3xs font-semibold uppercase tracking-wide"
+                  :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+                >
+                  {{ tag }}
+                </span>
+              </div>
+              <DateTime
+                :datetime="convertedData[timeLabel.absoluteIndex]?.time!"
+                class="text-xs text-fg-subtle"
+                year="numeric"
+                month="short"
+                day="numeric"
+              />
+            </div>
+
+            <div :class="activeTab === 'totalSize' ? 'flex flex-col' : 'flex flex-col-reverse'">
+              <!-- Install size -->
+              <div class="flex flex-row gap-2 items-end">
+                <span class="text-[var(--fg)]/70">{{ $t('package.stats.install_size') }}</span>
+                <span class="text-sm">
+                  {{
+                    bytesFormatter.format(convertedData[timeLabel.absoluteIndex]?.totalSize ?? 0)
+                  }}
+                </span>
+              </div>
+
+              <!-- Dependency count -->
+              <div class="flex flex-row gap-2 items-end">
+                <span class="text-[var(--fg)]/70">{{ $t('compare.dependencies') }}</span>
+                <span class="text-sm">
+                  {{
+                    compactNumberFormatter.format(
+                      convertedData[timeLabel.absoluteIndex]?.dependencyCount ?? 0,
+                    )
+                  }}
+                </span>
+              </div>
+            </div>
+
+            <!-- Positive & negative events -->
+            <ol
+              v-if="convertedData[timeLabel.absoluteIndex]?.events.length"
+              class="relative font-[Geist] mt-2"
+            >
+              <li
+                v-for="event in convertedData[timeLabel.absoluteIndex]?.events"
+                :key="event.key"
+                class="relative mb-1 ms-4 last:mb-0"
+              >
+                <span
+                  class="absolute -start-[1rem] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
+                  :class="
+                    event.positive
+                      ? 'bg-green-500 border-green-600'
+                      : 'bg-amber-500 border-amber-600'
+                  "
+                >
+                  <span class="w-2 h-2 text-white" :class="event.icon" aria-hidden="true" />
+                </span>
+                <p
+                  class="text-xs"
+                  :class="
+                    event.positive
+                      ? 'text-green-700 dark:text-green-400'
+                      : 'text-amber-700 dark:text-amber-400'
+                  "
+                >
+                  {{ event.text }}
+                </p>
+              </li>
+            </ol>
+          </div>
+        </template>
+
+        <!-- Keyboard navigation hint -->
+        <template #hint="{ isVisible }">
+          <p
+            v-if="isVisible"
+            class="text-accent text-xs -mt-6 force-text-left px-2"
+            aria-hidden="true"
+          >
+            {{ $t('compare.packages.line_chart_nav_hint') }}
+          </p>
+        </template>
+
+        <!-- Injecting custom svg elements -->
+        <template #svg="{ svg }">
+          <!-- Print watermark-->
+          <g
+            v-if="svg.isPrintingSvg || svg.isPrintingImg"
+            v-html="
+              drawSmallNpmxLogoAndTaglineWatermark({
+                svg,
+                colors: watermarkColors,
+                translateFn: $t,
+              })
+            "
+          />
+
+          <g class="pointer-events-none">
+            <!-- Marker for selected version -->
+            <circle
+              class="pointer-events-none svg-element-transition"
+              v-if="getActiveVersionDatapointPlot(svg.data[0], svg.slicer.start)"
+              :cx="getActiveVersionDatapointPlot(svg.data[0], svg.slicer.start)!.x"
+              :cy="getActiveVersionDatapointPlot(svg.data[0], svg.slicer.start)!.y"
+              r="8"
+              :fill="colors.accent"
+              :stroke="colors.bg"
+              stroke-width="2"
+            />
+
+            <!-- Marker for positive events -->
+            <g
+              v-for="plot in getPositiveDatapointPlots(svg.data[0], svg.slicer.start)"
+              :key="plot.key"
+              class="pointer-events-none"
+            >
+              <path
+                :d="`M ${plot.x - 5} ${plot.y - 20} l 4 6 l 10 -12`"
+                fill="none"
+                :stroke="colors.bg"
+                stroke-width="6"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="svg-element-transition"
+              />
+              <path
+                :d="`M ${plot.x - 5} ${plot.y - 20} l 4 6 l 10 -12`"
+                fill="none"
+                :stroke="e18eGradientColors.at(-1)"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="svg-element-transition"
+              />
+            </g>
+
+            <!-- Marker for negative events -->
+            <g
+              v-for="plot in getNegativeDatapointPlots(svg.data[0], svg.slicer.start)"
+              :key="plot.key"
+              class="pointer-events-none"
+            >
+              <path
+                :d="`M ${plot.x - 1} ${plot.y - 20 - (plot.offsetY ?? 0)} l -6 10 l 12 0 l -6 -10 m 0 5 l 0 2`"
+                fill="none"
+                :stroke="colors.bg"
+                stroke-width="6"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="svg-element-transition"
+              />
+              <path
+                :d="`M ${plot.x - 1} ${plot.y - 20 - (plot.offsetY ?? 0)} l -6 10 l 12 0 l -6 -10 m 0 5 l 0 2`"
+                fill="none"
+                :stroke="e18eGradientColors[0]"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="svg-element-transition"
+              />
+            </g>
+          </g>
+        </template>
+
+        <template #menuIcon="{ isOpen }">
+          <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
+          <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
+        </template>
+        <template #optionCsv>
+          <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
+        </template>
+        <template #optionImg>
+          <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
+        </template>
+        <template #optionSvg>
+          <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
+        </template>
+        <template #optionStack="{ isStack }">
+          <span
+            v-if="isStack"
+            class="i-lucide:layers-2 text-fg-subtle w-6 h-6 pointer-events-none"
+            aria-hidden="true"
+          />
+          <span
+            v-else
+            class="i-lucide:chart-line text-fg-subtle w-6 h-6 pointer-events-none"
+            aria-hidden="true"
+          />
+        </template>
+
+        <template #annotator-action-close>
+          <span
+            class="i-lucide:x w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
+        </template>
+        <template #annotator-action-color="{ color }">
+          <span class="i-lucide:palette w-6 h-6" :style="{ color }" aria-hidden="true" />
+        </template>
+        <template #annotator-action-draw="{ mode }">
+          <span
+            v-if="mode === 'arrow'"
+            class="i-lucide:move-up-right text-fg-subtle w-6 h-6"
+            aria-hidden="true"
+          />
+          <span
+            v-if="mode === 'text'"
+            class="i-lucide:type text-fg-subtle w-6 h-6"
+            aria-hidden="true"
+          />
+          <span
+            v-if="mode === 'line'"
+            class="i-lucide:pen-line text-fg-subtle w-6 h-6"
+            aria-hidden="true"
+          />
+          <span
+            v-if="mode === 'draw'"
+            class="i-lucide:line-squiggle text-fg-subtle w-6 h-6"
+            aria-hidden="true"
+          />
+        </template>
+        <template #annotator-action-undo>
+          <span
+            class="i-lucide:undo-2 w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
+        </template>
+        <template #annotator-action-redo>
+          <span
+            class="i-lucide:redo-2 w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
+        </template>
+        <template #annotator-action-delete>
+          <span
+            class="i-lucide:trash w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
+        </template>
+        <template #optionAnnotator="{ isAnnotator }">
+          <span
+            v-if="isAnnotator"
+            class="i-lucide:pen-off w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
+          <span
+            v-else
+            class="i-lucide:pen w-6 h-6 text-fg-subtle"
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
+        </template>
+        <template #optionAltCopy>
+          <span
+            class="w-6 h-6"
+            :class="
+              copied ? 'i-lucide:check text-accent' : 'i-lucide:person-standing text-fg-subtle'
+            "
+            style="pointer-events: none"
+            aria-hidden="true"
+          />
+        </template>
+
+        <!-- Custom minimap reset button -->
+        <template #reset-action="{ reset: resetMinimap }">
+          <button
+            type="button"
+            :aria-label="$t('package.timeline.chart.reset_minimap')"
+            class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
+            style="pointer-events: all !important"
+            @click="resetMinimap"
+          >
+            <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
+          </button>
+        </template>
+      </VueUiXy>
+      <template #fallback>
+        <SkeletonBlock class="flex place-items-center justify-center aspect-[1152/254.59]">
+          <span class="i-lucide:chart-line w-10 h-10 text-fg-muted" aria-hidden="true" />
+        </SkeletonBlock>
+      </template>
+
+      <!-- Sizes loading indicator -->
+      <div v-if="loading" class="h-0.5 rounded-full bg-bg-muted overflow-hidden">
+        <div class="h-full w-1/3 bg-accent rounded-full animate-indeterminate" />
+      </div>
+    </ClientOnly>
+  </div>
+</template>
+
+<style scoped>
+:deep(.vue-data-ui-component) {
+  --super-ease-out: cubic-bezier(0.15, 0.75, 0.35, 1);
+}
+
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent) !important;
+  border-radius: 0.1rem;
+  outline-offset: 0;
+}
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent) !important;
+  border-radius: 0.25rem;
+}
+
+:deep(.vue-data-ui-component .serie_line_0 path),
+.svg-element-transition,
+:deep(.vdui-shape-circle) {
+  transition: all 0.5s var(--super-ease-out) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::deep(.vue-data-ui-component .serie_line_0 path),
+  .svg-element-transition,
+  :deep(.vdui-shape-circle) {
+    transition: none !important;
+  }
+}
+
+:deep(.vue-ui-pen-and-paper-actions) {
+  background: var(--bg-elevated) !important;
+}
+
+:deep(.vue-ui-pen-and-paper-action) {
+  background: var(--bg-elevated) !important;
+  border: none !important;
+}
+
+:deep(.vue-ui-pen-and-paper-action:hover) {
+  background: var(--bg-elevated) !important;
+  box-shadow: none !important;
+}
+
+/* Override default placement of the refresh button to have it to the minimap's side */
+@media screen and (min-width: 767px) {
+  :deep(.vue-data-ui-refresh-button) {
+    top: -0.6rem !important;
+    left: calc(100% + 4rem) !important;
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    translate: -100%;
+  }
+  100% {
+    translate: 400%;
+  }
+}
+
+.animate-indeterminate {
+  animation: indeterminate 1.5s ease-in-out infinite;
+}
+</style>
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index bf57c7c760..083e14e003 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -25,6 +25,7 @@ import {
 } from '~/utils/chart-data-prediction'
 import { applyBlocklistCorrection, getAnomaliesForPackages } from '~/utils/download-anomalies'
 import { copyAltTextForTrendLineChart, sanitise, loadFile, applyEllipsis } from '~/utils/charts'
+import { useChartTooltipPosition } from '~/composables/useChartTooltipPosition'
 
 import('vue-data-ui/style.css')
 
@@ -71,6 +72,8 @@ function setIsZoom({ isZoom }: { isZoom: boolean }) {
   isZoomed.value = isZoom
 }
 
+const chartRef = useTemplateRef('chartRef')
+
 const { width } = useElementSize(rootEl)
 
 const compactNumberFormatter = useCompactNumberFormatter()
@@ -1385,6 +1388,8 @@ watch(
   { immediate: true },
 )
 
+const tooltipPosition = useChartTooltipPosition(chartRef)
+
 // VueUiXy chart component configuration
 const chartConfig = computed<VueUiXyConfig>(() => {
   return {
@@ -1518,6 +1523,9 @@ const chartConfig = computed<VueUiXyConfig>(() => {
       legend: { show: false, position: 'top' },
       tooltip: {
         teleportTo: props.inModal ? '#chart-modal' : undefined,
+        position: tooltipPosition.value,
+        offsetX: 24,
+        offsetY: isMultiPackageMode.value ? undefined : -24,
         borderColor: 'transparent',
         backdropFilter: false,
         backgroundColor: 'transparent',
@@ -1930,6 +1938,7 @@ const isSparklineLayout = computed({
           :aria-labelledby="isMultiPackageMode ? 'combined-chart-layout-tab' : undefined"
         >
           <VueUiXy
+            ref="chartRef"
             :dataset="normalisedDataset"
             :config="chartConfig"
             :class="{
diff --git a/app/components/SkeletonBlock.vue b/app/components/SkeletonBlock.vue
index 7467e4c103..05ef97ae8c 100644
--- a/app/components/SkeletonBlock.vue
+++ b/app/components/SkeletonBlock.vue
@@ -1,3 +1,3 @@
 <template>
-  <div class="bg-bg-elevated rounded animate-skeleton-pulse" />
+  <div class="bg-bg-elevated rounded animate-skeleton-pulse"><slot /></div>
 </template>
diff --git a/app/components/Tab/Item.vue b/app/components/Tab/Item.vue
index 6b0f4c3aff..4337c061ce 100644
--- a/app/components/Tab/Item.vue
+++ b/app/components/Tab/Item.vue
@@ -8,10 +8,12 @@ const props = withDefaults(
     value: string
     icon?: IconClass
     tabId?: string
+    controlsPanel?: boolean
     variant?: 'primary' | 'secondary'
     size?: 'sm' | 'md'
   }>(),
   {
+    controlsPanel: true,
     variant: 'secondary',
     size: 'md',
   },
@@ -22,12 +24,13 @@ const attrs = useAttrs()
 const selected = inject<WritableComputedRef<string>>('tabs-selected')
 const getTabId = inject<(value: string) => string>('tabs-tab-id')
 const getPanelId = inject<(value: string) => string>('tabs-panel-id')
+
 if (!selected || !getTabId || !getPanelId) {
   throw new Error('TabItem must be used inside a TabRoot component')
 }
 const isSelected = computed(() => selected.value === props.value)
 const resolvedTabId = computed(() => props.tabId ?? getTabId(props.value))
-const resolvedPanelId = computed(() => getPanelId(props.value))
+const resolvedPanelId = computed(() => (props.controlsPanel ? getPanelId(props.value) : undefined))
 const select = () => {
   selected.value = props.value
 }
diff --git a/app/composables/useChartTooltipPosition.ts b/app/composables/useChartTooltipPosition.ts
new file mode 100644
index 0000000000..0df3945c64
--- /dev/null
+++ b/app/composables/useChartTooltipPosition.ts
@@ -0,0 +1,26 @@
+/**
+ * This composable returns a dynamic position to be fed to vue-data-ui components configugration for the `tooltip.position` attribute. Use it to position tooltips to the right or left side to free the view for datapoints, typically on line charts.
+ */
+
+import { useMouseInElement } from '@vueuse/core'
+
+type TooltipPosition = 'left' | 'right' | 'center'
+type TemplateRefValue = HTMLElement | { $el?: HTMLElement } | null | undefined
+
+export function useChartTooltipPosition(
+  chartRef: MaybeRefOrGetter<TemplateRefValue>,
+): ComputedRef<TooltipPosition> {
+  const target = computed<HTMLElement | null>(() => {
+    const value = toValue(chartRef)
+    if (!value) return null
+    if (value instanceof HTMLElement) return value
+    return value.$el || null
+  })
+
+  const { elementX, elementWidth, isOutside } = useMouseInElement(target)
+
+  return computed<TooltipPosition>(() => {
+    if (isOutside.value || elementWidth.value === 0) return 'center'
+    return elementX.value > elementWidth.value / 2 ? 'left' : 'right'
+  })
+}
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index 1fc879a0a4..c5d5734ff6 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -50,6 +50,10 @@ export interface AppSettings {
     anomaliesFixed: boolean
     predictionPoints: number
   }
+  timelineChart: {
+    isZeroBased: boolean
+    showZoom: boolean
+  }
 }
 
 const DEFAULT_SETTINGS: AppSettings = {
@@ -77,6 +81,10 @@ const DEFAULT_SETTINGS: AppSettings = {
     anomaliesFixed: true,
     predictionPoints: 4,
   },
+  timelineChart: {
+    isZeroBased: false,
+    showZoom: false,
+  },
 }
 
 const STORAGE_KEY = 'npmx-settings'
diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index bb9f577eb0..a007efde15 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -4,6 +4,7 @@ import { compare } from 'semver'
 import type {
   TimelineResponse,
   TimelineVersion,
+  SubEvent,
 } from '~~/server/api/registry/timeline/[...pkg].get'
 import type { TimelineSizeResponse } from '~~/server/api/registry/timeline/sizes/[...pkg].get'
 
@@ -111,14 +112,17 @@ function sizeKey(ver: string) {
 }
 
 async function fetchSizes(offset: number) {
+  const requestedPackage = packageName.value
   sizeFetchesInFlight.value++
   try {
     const data = await $fetch<TimelineSizeResponse>(
-      `/api/registry/timeline/sizes/${packageName.value}`,
+      `/api/registry/timeline/sizes/${requestedPackage}`,
       { query: { offset, limit: PAGE_SIZE } },
     )
+    if (requestedPackage !== packageName.value) return
+
     for (const entry of data.sizes) {
-      sizeCache.set(sizeKey(entry.version), {
+      sizeCache.set(`${requestedPackage}@${entry.version}`, {
         totalSize: entry.totalSize,
         dependencyCount: entry.dependencyCount,
       })
@@ -143,13 +147,6 @@ if (import.meta.client) {
 
 const bytesFormatter = useBytesFormatter()
 
-interface SubEvent {
-  key: string
-  positive: boolean
-  icon: string
-  text: string
-}
-
 // Detect notable changes between consecutive versions (size, license, ESM, types)
 // Versions are compared against their semver predecessor, not chronological neighbor,
 // so interleaved legacy releases don't produce misleading cross-line diffs.
@@ -308,6 +305,8 @@ const versionSubEvents = computed(() => {
   return result
 })
 
+const selectedVersion = shallowRef<string | null>(null)
+
 useSeoMeta({
   title: () => `Timeline - ${packageName.value} - npmx`,
   description: () => `Version timeline for ${packageName.value}`,
@@ -325,12 +324,21 @@ useSeoMeta({
       page="timeline"
     />
 
-    <div class="container w-full py-8">
-      <!-- Sizes loading indicator -->
-      <div v-if="sizesLoading" class="h-0.5 mb-4 rounded-full bg-bg-muted overflow-hidden">
-        <div class="h-full w-1/3 bg-accent rounded-full animate-indeterminate" />
+    <div class="sticky top-24 z-1 bg-bg mt-8">
+      <div class="container w-full">
+        <div class="mx-auto">
+          <PackageTimelineChart
+            :sizeCache
+            :versionSubEvents
+            :timelineEntries
+            :selectedVersion
+            :loading="sizesLoading"
+          />
+        </div>
       </div>
+    </div>
 
+    <div class="container w-full py-8">
       <!-- Timeline -->
       <ol v-if="timelineEntries.length" class="relative border-s border-border ms-4">
         <li v-for="entry in timelineEntries" :key="entry.version" class="mb-6 ms-6">
@@ -346,6 +354,10 @@ useSeoMeta({
               class="text-sm font-medium"
               :class="entry.version === version ? 'text-accent' : ''"
               dir="ltr"
+              @mouseenter="selectedVersion = entry.version"
+              @mouseleave="selectedVersion = null"
+              @focus="selectedVersion = entry.version"
+              @blur="selectedVersion = null"
             >
               {{ entry.version }}
             </LinkBase>
@@ -427,18 +439,3 @@ useSeoMeta({
     </div>
   </main>
 </template>
-
-<style scoped>
-@keyframes indeterminate {
-  0% {
-    translate: -100%;
-  }
-  100% {
-    translate: 400%;
-  }
-}
-
-.animate-indeterminate {
-  animation: indeterminate 1.5s ease-in-out infinite;
-}
-</style>
diff --git a/app/utils/charts.ts b/app/utils/charts.ts
index 3cdbe3fd34..7c5a86ff3b 100644
--- a/app/utils/charts.ts
+++ b/app/utils/charts.ts
@@ -9,6 +9,7 @@ import type {
   VueUiXyDatasetLineItem,
 } from 'vue-data-ui'
 import type { ChartTimeGranularity } from '~/types/chart'
+import type { SubEvent } from '~~/server/api/registry/timeline/[...pkg].get'
 
 export function sum(numbers: number[]): number {
   return numbers.reduce((a, b) => a + b, 0)
@@ -451,6 +452,37 @@ export type FacetBarChartConfig = VueUiHorizontalBarConfig & {
   $t: TrendTranslateFunction
 }
 
+export type TimelineSizeCacheValue = {
+  totalSize: number
+  dependencyCount: number
+}
+
+export type ConvertedTimelineSizeCacheEntry = TimelineSizeCacheValue & {
+  name: string
+}
+
+export type EnrichedTimelineSizeCacheEntry = ConvertedTimelineSizeCacheEntry & {
+  version: string
+  time?: string
+  license?: string
+  type?: string
+  hasTypes?: boolean
+  hasTrustedPublisher?: boolean
+  hasProvenance?: boolean
+  tags: string[]
+  events: SubEvent[]
+  hasPositive: boolean
+  hasNegative: boolean
+}
+
+export type TimelineChartConfig = VueUiXyConfig & {
+  metric: 'totalSize' | 'dependencyCount'
+  packageName: string
+  copy: (text: string) => Promise<void>
+  $t: TrendTranslateFunction
+  numberFormatter: (value: number) => string
+}
+
 // Used for TrendsChart.vue
 export function createAltTextForTrendLineChart({
   dataset,
@@ -705,6 +737,68 @@ export async function copyAltTextForCompareScatterChart({
   await config.copy(altText)
 }
 
+// Used for TimelineChart.vue
+export function createAltTextForTimelineChart({
+  dataset,
+  config,
+}: AltCopyArgs<EnrichedTimelineSizeCacheEntry[], TimelineChartConfig>) {
+  if (!dataset) return ''
+  const metric =
+    config.metric === 'totalSize'
+      ? config.$t('package.stats.install_size')
+      : config.$t('compare.dependencies')
+  const withEvents = dataset.filter(d => d.events.length)
+  const first = dataset[0]
+  const last = dataset.at(-1)
+
+  if (!first || !last) return ''
+
+  const firstValue = config.metric === 'totalSize' ? first?.totalSize : first?.dependencyCount
+  const lastValue = config.metric === 'totalSize' ? last?.totalSize : last?.dependencyCount
+  const baseline = firstValue ?? 0
+  const current = lastValue ?? baseline
+  const overall_progress_percentage =
+    baseline > 0 ? Math.round(((current - baseline) / baseline) * 100) : 0
+
+  const version_events = withEvents
+    .map(item =>
+      config.$t('package.timeline.chart.copy_alt.version_events', {
+        version: item.version,
+        // eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys
+        events: item.events.map(e => config.$t(e.text).toLocaleLowerCase()).join(', '),
+      }),
+    )
+    .join('; ')
+
+  const key_changes = !withEvents.length
+    ? ''
+    : config.$t('package.timeline.chart.copy_alt.key_changes', {
+        version_events,
+      })
+
+  const altText = config.$t('package.timeline.chart.copy_alt.general_description', {
+    metric: metric.toLocaleLowerCase(),
+    package: config.packageName,
+    first: first?.version ?? '',
+    last: last?.version ?? '',
+    first_value: config.numberFormatter(firstValue ?? 0),
+    last_value: config.numberFormatter(lastValue ?? 0),
+    overall_progress_percentage,
+    key_changes,
+    watermark: config.$t('package.trends.copy_alt.watermark'),
+  })
+
+  return altText
+}
+
+export async function copyAltTextForTimelineChart({
+  dataset,
+  config,
+}: AltCopyArgs<EnrichedTimelineSizeCacheEntry[], TimelineChartConfig>) {
+  const altText = createAltTextForTimelineChart({ dataset, config })
+  await config.copy(altText)
+}
+
 // Used in chart context menu callbacks
 // @todo replace with downloadFileLink
 export function loadFile(link: string, filename: string) {
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 9144df697f..5cf61d60a3 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -591,7 +591,18 @@
       "trusted_publisher_added": "Trusted publishing enabled",
       "trusted_publisher_removed": "Trusted publishing removed",
       "provenance_added": "Provenance enabled",
-      "provenance_removed": "Provenance removed"
+      "provenance_removed": "Provenance removed",
+      "chart": {
+        "tab_aria_label": "Metric selection",
+        "base_scale": "start y-axis at zero",
+        "zoom": "zoom",
+        "reset_minimap": "reset minimap",
+        "copy_alt": {
+          "key_changes": "Key changes: {version_events}.",
+          "version_events": "version {version}: {events}",
+          "general_description": "Line chart showing the {metric} of the {package} package, from version {first} to {last}. The {metric} in version {first} is {first_value}, in version {last} is {last_value} ({overall_progress_percentage}% overall). {key_changes} {watermark}."
+        }
+      }
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 7c21cc4f60..ef6b16f298 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -579,7 +579,18 @@
       "trusted_publisher_added": "Vérification ajoutée",
       "trusted_publisher_removed": "Vérification enlevée",
       "provenance_added": "Preuve de provenance ajoutée",
-      "provenance_removed": "Preuve de provenance enlevée"
+      "provenance_removed": "Preuve de provenance enlevée",
+      "chart": {
+        "tab_aria_label": "Sélection de métrique",
+        "base_scale": "positionner les ordonnées à zéro",
+        "zoom": "zoom",
+        "reset_minimap": "Réinitialiser la mini-carte",
+        "copy_alt": {
+          "key_changes": "Principaux changements: {version_events}",
+          "version_events": "version {version}: {events}",
+          "general_description": "Graphique en ligne montrant la métrique {metric} pour le paquet {package}, depuis la version {first} à {last}. La valeur de la métrique {metric} pour la version {first} est {first_value}, et {last_value} pour la version {last} ({overall_progress_percentage}% dans l'ensemble). {key_changes} {watermark}."
+        }
+      }
     },
     "dependencies": {
       "title": "Dépendances ({count})",
diff --git a/i18n/schema.json b/i18n/schema.json
index b83d9682c4..31b662ee58 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1779,6 +1779,39 @@
             },
             "provenance_removed": {
               "type": "string"
+            },
+            "chart": {
+              "type": "object",
+              "properties": {
+                "tab_aria_label": {
+                  "type": "string"
+                },
+                "base_scale": {
+                  "type": "string"
+                },
+                "zoom": {
+                  "type": "string"
+                },
+                "reset_minimap": {
+                  "type": "string"
+                },
+                "copy_alt": {
+                  "type": "object",
+                  "properties": {
+                    "key_changes": {
+                      "type": "string"
+                    },
+                    "version_events": {
+                      "type": "string"
+                    },
+                    "general_description": {
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
             }
           },
           "additionalProperties": false
diff --git a/package.json b/package.json
index abb4fe1a0b..a03bfcef60 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.1.16",
     "vue": "3.5.34",
-    "vue-data-ui": "3.18.2",
+    "vue-data-ui": "3.19.4",
     "vue-router": "5.0.4"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0fff23140e..3025ec45fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -254,8 +254,8 @@ importers:
         specifier: 3.5.34
         version: 3.5.34(typescript@6.0.2)
       vue-data-ui:
-        specifier: 3.18.2
-        version: 3.18.2(vue@3.5.34)
+        specifier: 3.19.4
+        version: 3.19.4(vue@3.5.34)
       vue-router:
         specifier: 5.0.4
         version: 5.0.4(@vue/compiler-sfc@3.5.34)(vue@3.5.34)
@@ -4009,61 +4009,31 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@oxlint-tsgolint/darwin-arm64@0.22.0':
-    resolution: {integrity: sha512-/exgXceakHbQrzaHTtKOe7MuDATaWMCCWpsCDQCZKeYhLGXzComipTrCYnHzAXrdnNBb5r5K+RRf5A6ormrhMA==}
-    cpu: [arm64]
-    os: [darwin]
-
   '@oxlint-tsgolint/darwin-x64@0.20.0':
     resolution: {integrity: sha512-7HeVMuclGfG+NLZi2ybY0T4fMI7/XxO/208rJk+zEIloKkVnlh11Wd241JMGwgNFXn+MLJbOqOfojDb2Dt4L1g==}
     cpu: [x64]
     os: [darwin]
 
-  '@oxlint-tsgolint/darwin-x64@0.22.0':
-    resolution: {integrity: sha512-xFGdIahlmUbK+/MpZ5y08D0ewMGLDbd2Vki5wxVFYg50lSrtgPAtdDl+kqKZLNaFu0zpMar8n9wv1le05sL/jw==}
-    cpu: [x64]
-    os: [darwin]
-
   '@oxlint-tsgolint/linux-arm64@0.20.0':
     resolution: {integrity: sha512-zxhUwz+WSxE6oWlZLK2z2ps9yC6ebmgoYmjAl0Oa48+GqkZ56NVgo+wb8DURNv6xrggzHStQxqQxe3mK51HZag==}
     cpu: [arm64]
     os: [linux]
 
-  '@oxlint-tsgolint/linux-arm64@0.22.0':
-    resolution: {integrity: sha512-53RvC9f77eUo+V1dfQNwGVnsIfPJFMibRR0ee128EUpYNDOZe/ojmCfuXJeU7cY91V7r7fZSm42KPJocXUX8og==}
-    cpu: [arm64]
-    os: [linux]
-
   '@oxlint-tsgolint/linux-x64@0.20.0':
     resolution: {integrity: sha512-/1l6FnahC9im8PK+Ekkx/V3yetO/PzZnJegE2FXcv/iXEhbeVxP/ouiTYcUQu9shT1FWJCSNti1VJHH+21Y1dg==}
     cpu: [x64]
     os: [linux]
 
-  '@oxlint-tsgolint/linux-x64@0.22.0':
-    resolution: {integrity: sha512-evZcJAZ9hjNyuN69RnXwbt+U2pAOcYt+yvqukgugiCkRm4iBZ0R0CvpY1tgfG2XcGUhEPh8dljO+nPZTEVGpCQ==}
-    cpu: [x64]
-    os: [linux]
-
   '@oxlint-tsgolint/win32-arm64@0.20.0':
     resolution: {integrity: sha512-oPZ5Yz8sVdo7P/5q+i3IKeix31eFZ55JAPa1+RGPoe9PoaYVsdMvR6Jvib6YtrqoJnFPlg3fjEjlEPL8VBKYJA==}
     cpu: [arm64]
     os: [win32]
 
-  '@oxlint-tsgolint/win32-arm64@0.22.0':
-    resolution: {integrity: sha512-7jTO+k1mr5BxRAI2fxc1NRcE3MAbHNZ0Vef9SD1yAR6d1E6qEv5D/D7yuHpQpw6AO3qoecSVo2Jzr+JirN61+w==}
-    cpu: [arm64]
-    os: [win32]
-
   '@oxlint-tsgolint/win32-x64@0.20.0':
     resolution: {integrity: sha512-4stx8RHj3SP9vQyRF/yZbz5igtPvYMEUR8CUoha4BVNZihi39DpCR8qkU7lpjB5Ga1DRMo2pHaA4bdTOMaY4mw==}
     cpu: [x64]
     os: [win32]
 
-  '@oxlint-tsgolint/win32-x64@0.22.0':
-    resolution: {integrity: sha512-7lbl9XFcqO+scsynxMzTQdl0XUe6sBUCyY/oGWvCB+JmV4U+70vzSyZJdTEzzxtkZiNnUVFFh9RJLmoiQSne+w==}
-    cpu: [x64]
-    os: [win32]
-
   '@oxlint/binding-android-arm-eabi@1.58.0':
     resolution: {integrity: sha512-1T7UN3SsWWxpWyWGn1cT3ASNJOo+pI3eUkmEl7HgtowapcV8kslYpFQcYn431VuxghXakPNlbjRwhqmR37PFOg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -9442,10 +9412,6 @@ packages:
     resolution: {integrity: sha512-/Uc9TQyN1l8w9QNvXtVHYtz+SzDJHKpb5X0UnHodl0BVzijUPk0LPlDOHAvogd1UI+iy9ZSF6gQxEqfzUxCULQ==}
     hasBin: true
 
-  oxlint-tsgolint@0.22.0:
-    resolution: {integrity: sha512-ku4MecLmCQIj1ScCtzNAqTuyl0BJQ02B36fJT+c5XQihHpYSFak+FC3GYO5fPyYk4oDwi0w0S7hTvrpNzuZhig==}
-    hasBin: true
-
   oxlint@1.58.0:
     resolution: {integrity: sha512-t4s9leczDMqlvOSjnbCQe7gtoLkWgBGZ7sBdCJ9EOj5IXFSG/X7OAzK4yuH4iW+4cAYe8kLFbC8tuYMwWZm+Cg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -11522,8 +11488,8 @@ packages:
   vue-component-type-helpers@3.2.8:
     resolution: {integrity: sha512-9689efAXhN/EV86plgkL/XFiJSXhGtWPG6JDboZ+QnjlUWUUQrQ0ILKQtw4iQsuwIwu5k6Aw+JnehDe7161e7A==}
 
-  vue-data-ui@3.18.2:
-    resolution: {integrity: sha512-BJP+YMrJeAdVnT2rmBsZBe+rHksReCHrzFM8MYXAgndgAdPJlzsLigylwflLhm9sndQeAt6ihCslX0VIU+nyUQ==}
+  vue-data-ui@3.19.4:
+    resolution: {integrity: sha512-kp12dZnHWCwCczscGbmwec9rjtCFqYFDO5Abenpn2mKaZUUNWrMwnoCVwYtdu8LeBBhs/JQLX7Ty6OjlK05kag==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -15579,39 +15545,21 @@ snapshots:
   '@oxlint-tsgolint/darwin-arm64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/darwin-arm64@0.22.0':
-    optional: true
-
   '@oxlint-tsgolint/darwin-x64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/darwin-x64@0.22.0':
-    optional: true
-
   '@oxlint-tsgolint/linux-arm64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/linux-arm64@0.22.0':
-    optional: true
-
   '@oxlint-tsgolint/linux-x64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/linux-x64@0.22.0':
-    optional: true
-
   '@oxlint-tsgolint/win32-arm64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/win32-arm64@0.22.0':
-    optional: true
-
   '@oxlint-tsgolint/win32-x64@0.20.0':
     optional: true
 
-  '@oxlint-tsgolint/win32-x64@0.22.0':
-    optional: true
-
   '@oxlint/binding-android-arm-eabi@1.58.0':
     optional: true
 
@@ -21924,16 +21872,6 @@ snapshots:
       '@oxlint-tsgolint/win32-arm64': 0.20.0
       '@oxlint-tsgolint/win32-x64': 0.20.0
 
-  oxlint-tsgolint@0.22.0:
-    optionalDependencies:
-      '@oxlint-tsgolint/darwin-arm64': 0.22.0
-      '@oxlint-tsgolint/darwin-x64': 0.22.0
-      '@oxlint-tsgolint/linux-arm64': 0.22.0
-      '@oxlint-tsgolint/linux-x64': 0.22.0
-      '@oxlint-tsgolint/win32-arm64': 0.22.0
-      '@oxlint-tsgolint/win32-x64': 0.22.0
-    optional: true
-
   oxlint@1.58.0(oxlint-tsgolint@0.20.0):
     optionalDependencies:
       '@oxlint/binding-android-arm-eabi': 1.58.0
@@ -21981,30 +21919,6 @@ snapshots:
       oxlint-tsgolint: 0.20.0
     optional: true
 
-  oxlint@1.61.0(oxlint-tsgolint@0.22.0):
-    optionalDependencies:
-      '@oxlint/binding-android-arm-eabi': 1.61.0
-      '@oxlint/binding-android-arm64': 1.61.0
-      '@oxlint/binding-darwin-arm64': 1.61.0
-      '@oxlint/binding-darwin-x64': 1.61.0
-      '@oxlint/binding-freebsd-x64': 1.61.0
-      '@oxlint/binding-linux-arm-gnueabihf': 1.61.0
-      '@oxlint/binding-linux-arm-musleabihf': 1.61.0
-      '@oxlint/binding-linux-arm64-gnu': 1.61.0
-      '@oxlint/binding-linux-arm64-musl': 1.61.0
-      '@oxlint/binding-linux-ppc64-gnu': 1.61.0
-      '@oxlint/binding-linux-riscv64-gnu': 1.61.0
-      '@oxlint/binding-linux-riscv64-musl': 1.61.0
-      '@oxlint/binding-linux-s390x-gnu': 1.61.0
-      '@oxlint/binding-linux-x64-gnu': 1.61.0
-      '@oxlint/binding-linux-x64-musl': 1.61.0
-      '@oxlint/binding-openharmony-arm64': 1.61.0
-      '@oxlint/binding-win32-arm64-msvc': 1.61.0
-      '@oxlint/binding-win32-ia32-msvc': 1.61.0
-      '@oxlint/binding-win32-x64-msvc': 1.61.0
-      oxlint-tsgolint: 0.22.0
-    optional: true
-
   p-all@5.0.1:
     dependencies:
       p-map: 6.0.0
@@ -24263,7 +24177,7 @@ snapshots:
     optionalDependencies:
       eslint: 9.39.2(jiti@2.6.1)
       optionator: 0.9.4
-      oxlint: 1.61.0(oxlint-tsgolint@0.22.0)
+      oxlint: 1.61.0(oxlint-tsgolint@0.20.0)
       typescript: 6.0.2
       vue-tsc: 3.2.6(typescript@6.0.2)
 
@@ -24419,7 +24333,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.8: {}
 
-  vue-data-ui@3.18.2(vue@3.5.34):
+  vue-data-ui@3.19.4(vue@3.5.34):
     dependencies:
       vue: 3.5.34(typescript@6.0.2)
 
diff --git a/server/api/registry/timeline/[...pkg].get.ts b/server/api/registry/timeline/[...pkg].get.ts
index 05ffbecdf6..aa4455513f 100644
--- a/server/api/registry/timeline/[...pkg].get.ts
+++ b/server/api/registry/timeline/[...pkg].get.ts
@@ -18,6 +18,13 @@ export interface TimelineResponse {
   total: number
 }
 
+export interface SubEvent {
+  key: string
+  positive: boolean
+  icon: string
+  text: string
+}
+
 /**
  * Returns paginated version timeline data for a package.
  *
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index c4381fd7b6..2fae464f53 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -269,6 +269,7 @@ import SearchProviderToggleServer from '~/components/SearchProviderToggle.server
 import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
 import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
 import FacetScatterChart from '~/components/Compare/FacetScatterChart.vue'
+import PackageTimelineChart from '~/components/Package/TimelineChart.vue'
 import PackageLikeCard from '~/components/Package/LikeCard.vue'
 import SizeIncrease from '~/components/Package/SizeIncrease.vue'
 import SizeDecrease from '~/components/Package/SizeDecrease.vue'
@@ -1066,6 +1067,22 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
+    describe('PackageTimelineChart', () => {
+      it('should have no accessibility violations', async () => {
+        const wrapper = await mountSuspended(PackageTimelineChart, {
+          props: {
+            sizeCache: new Map(),
+            versionSubEvents: new Map(),
+            timelineEntries: [],
+            selectedVersion: null,
+            loading: false,
+          },
+        })
+        const results = await runAxe(wrapper)
+        expect(results.violations).toEqual([])
+      })
+    })
+
     describe('FacetBarChart', () => {
       it('should have no accessibility violations', async () => {
         const wrapper = await mountSuspended(FacetBarChart, {
diff --git a/test/unit/app/composables/use-chart-tooltip-position.spec.ts b/test/unit/app/composables/use-chart-tooltip-position.spec.ts
new file mode 100644
index 0000000000..591fcd906e
--- /dev/null
+++ b/test/unit/app/composables/use-chart-tooltip-position.spec.ts
@@ -0,0 +1,113 @@
+import { computed, ref, shallowRef, toValue } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useChartTooltipPosition } from '~/composables/useChartTooltipPosition'
+
+const mouseState = vi.hoisted(() => ({
+  target: null as unknown,
+}))
+
+const elementX = ref(0)
+const elementWidth = ref(0)
+const isOutside = ref(true)
+
+class MockHTMLElement {}
+
+vi.stubGlobal('HTMLElement', MockHTMLElement)
+vi.stubGlobal('computed', computed)
+vi.stubGlobal('toValue', toValue)
+
+vi.mock('@vueuse/core', () => ({
+  useMouseInElement: vi.fn(target => {
+    mouseState.target = target
+    return {
+      elementX,
+      elementWidth,
+      isOutside,
+    }
+  }),
+}))
+
+describe('useChartTooltipPosition', () => {
+  beforeEach(() => {
+    elementX.value = 0
+    elementWidth.value = 0
+    isOutside.value = true
+    mouseState.target = null
+  })
+
+  it('returns center when the mouse is outside', () => {
+    const element = new MockHTMLElement() as HTMLElement
+    const position = useChartTooltipPosition(shallowRef(element))
+    isOutside.value = true
+    elementWidth.value = 100
+    elementX.value = 75
+    expect(position.value).toBe('center')
+  })
+
+  it('returns center when element width is 0', () => {
+    const element = new MockHTMLElement() as HTMLElement
+    const position = useChartTooltipPosition(shallowRef(element))
+    isOutside.value = false
+    elementWidth.value = 0
+    elementX.value = 75
+    expect(position.value).toBe('center')
+  })
+
+  it('returns left when the mouse is on the right half of the element', () => {
+    const element = new MockHTMLElement() as HTMLElement
+    const position = useChartTooltipPosition(shallowRef(element))
+    isOutside.value = false
+    elementWidth.value = 100
+    elementX.value = 51
+    expect(position.value).toBe('left')
+  })
+
+  it('returns right when the mouse is on the left half of the element', () => {
+    const element = new MockHTMLElement() as HTMLElement
+    const position = useChartTooltipPosition(shallowRef(element))
+    isOutside.value = false
+    elementWidth.value = 100
+    elementX.value = 49
+    expect(position.value).toBe('right')
+  })
+
+  it('returns right when the mouse is exactly at the center', () => {
+    const element = new MockHTMLElement() as HTMLElement
+    const position = useChartTooltipPosition(shallowRef(element))
+    isOutside.value = false
+    elementWidth.value = 100
+    elementX.value = 50
+    expect(position.value).toBe('right')
+  })
+
+  it('accepts a Vue component ref exposing $el', () => {
+    const element = new MockHTMLElement() as HTMLElement
+    const componentReference = shallowRef({ $el: element })
+    useChartTooltipPosition(componentReference)
+    expect((mouseState.target as ReturnType<typeof computed>).value).toBe(element)
+  })
+
+  it('returns null as target when ref value is null', () => {
+    useChartTooltipPosition(shallowRef(null))
+    expect((mouseState.target as ReturnType<typeof computed>).value).toBe(null)
+  })
+
+  it('returns null when component ref has no $el', () => {
+    const componentReference = shallowRef({})
+    useChartTooltipPosition(componentReference)
+    expect((mouseState.target as ReturnType<typeof computed>).value).toBe(null)
+  })
+
+  it('uses the HTMLElement directly as target', () => {
+    const element = new MockHTMLElement() as HTMLElement
+    useChartTooltipPosition(shallowRef(element))
+    expect((mouseState.target as ReturnType<typeof computed>).value).toBe(element)
+  })
+
+  it('uses the component $el as target', () => {
+    const element = new MockHTMLElement() as HTMLElement
+    const componentReference = shallowRef({ $el: element })
+    useChartTooltipPosition(componentReference)
+    expect((mouseState.target as ReturnType<typeof computed>).value).toBe(element)
+  })
+})
diff --git a/test/unit/app/utils/charts.spec.ts b/test/unit/app/utils/charts.spec.ts
index 72c3d6c998..ae2ff47593 100644
--- a/test/unit/app/utils/charts.spec.ts
+++ b/test/unit/app/utils/charts.spec.ts
@@ -11,6 +11,8 @@ import {
   copyAltTextForTrendLineChart,
   createAltTextForVersionsBarChart,
   copyAltTextForVersionsBarChart,
+  createAltTextForTimelineChart,
+  copyAltTextForTimelineChart,
   loadFile,
   sanitise,
   insertLineBreaks,
@@ -19,6 +21,8 @@ import {
   type TrendLineDataset,
   type VersionsBarConfig,
   type VersionsBarDataset,
+  type TimelineChartConfig,
+  type EnrichedTimelineSizeCacheEntry,
 } from '~/utils/charts'
 import type { AltCopyArgs } from 'vue-data-ui'
 
@@ -35,6 +39,19 @@ function createTranslateMock() {
   return { translate, calls }
 }
 
+function createTimelineConfig(overrides: Partial<TimelineChartConfig> = {}): TimelineChartConfig {
+  const { translate } = createTranslateMock()
+  const config: TimelineChartConfig = {
+    numberFormatter: (value: number) => `nf${value}`,
+    packageName: 'nuxt',
+    metric: 'totalSize',
+    copy: vi.fn(async () => undefined),
+    $t: translate,
+  } as unknown as TimelineChartConfig
+
+  return { ...config, ...overrides }
+}
+
 function createTrendLineConfig(overrides: Partial<TrendLineConfig> = {}): TrendLineConfig {
   const { translate } = createTranslateMock()
 
@@ -1187,6 +1204,80 @@ describe('copyAltTextForVersionsBarChart', () => {
   })
 })
 
+const timelineDataset = [
+  {
+    dependencyCount: 100,
+    events: [],
+    version: '4.0.0',
+    totalSize: 120_000_000,
+  },
+  {
+    dependencyCount: 80,
+    events: [],
+    version: '4.0.1',
+    totalSize: 115_000_000,
+  },
+] as unknown as EnrichedTimelineSizeCacheEntry[]
+
+describe('createAltTextForTimelineChart', () => {
+  it('handles empty dataset without throwing', () => {
+    const { translate } = createTranslateMock()
+    const config = createTimelineConfig({ $t: translate })
+
+    expect(() =>
+      createAltTextForTimelineChart({
+        dataset: [],
+        config,
+      } as AltCopyArgs<EnrichedTimelineSizeCacheEntry[], TimelineChartConfig>),
+    ).not.toThrow()
+  })
+
+  it('returns empty string when dataset is null', () => {
+    const translateMock = createTranslateMock()
+    const config = createTimelineConfig({ $t: translateMock.translate })
+
+    const result = createAltTextForTimelineChart({
+      dataset: null,
+      config,
+    } as unknown as AltCopyArgs<EnrichedTimelineSizeCacheEntry[], TimelineChartConfig>)
+
+    expect(result).toBe('')
+    expect(translateMock.calls).toHaveLength(0)
+  })
+
+  it('returns an alt text', () => {
+    const translateMock = createTranslateMock()
+    const config = createTimelineConfig({ $t: translateMock.translate })
+
+    const result = createAltTextForTimelineChart({
+      dataset: timelineDataset,
+      config,
+    } as unknown as AltCopyArgs<EnrichedTimelineSizeCacheEntry[], TimelineChartConfig>)
+
+    expect(result).toBe('t:package.timeline.chart.copy_alt.general_description')
+    expect(translateMock.calls).toHaveLength(3)
+  })
+})
+
+describe('copyAltTextForTimelineChart', () => {
+  it('forwards createAltTextForTimelineChart result to config.copy', async () => {
+    const copyMock = vi.fn(async () => undefined)
+    const config = createTimelineConfig({ copy: copyMock })
+    const expected = createAltTextForTimelineChart({
+      dataset: timelineDataset,
+      config,
+    })
+
+    await copyAltTextForTimelineChart({
+      dataset: timelineDataset,
+      config,
+    } as AltCopyArgs<EnrichedTimelineSizeCacheEntry[], TimelineChartConfig>)
+
+    expect(copyMock).toHaveBeenCalledTimes(1)
+    expect(copyMock).toHaveBeenCalledWith(expected)
+  })
+})
+
 describe('loadFile', () => {
   let createElementMock: ReturnType<typeof vi.fn>
   let clickMock: ReturnType<typeof vi.fn>