From 3e10ca661144973b38bdf8e2487e9b5e0b8d693e Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 7 Oct 2025 14:34:06 +0200
Subject: [PATCH] fix: highlight is too wide when batching weeks in
 archived:created chart (#10751)

Makes it so that the default width calculation for the highlighter
plugin attempts to first use the number of entries in the data set for
the x axis, but falls back to using the number of categories if that is
not available. This is probably the more "correct" / "do what I mean"
approach to setting highlighter width.

Fixes an issue where the highlight would be too wide if the labels were
set to "auto" instead of "data".

The width function is only used in two places (the archived:created
graph and the network graph). Both of those work fine with the new
update.

Before:
<img width="831" height="401" alt="image"
src="https://github.com/user-attachments/assets/8487b95f-cc49-4ff6-a519-7f79e1048eed"
/>

After:
<img width="886" height="378" alt="image"
src="https://github.com/user-attachments/assets/ad2102cb-3342-4a28-aa54-6b31caa495e1"
/>
---
 .../src/component/common/Chart/customHighlightPlugin.ts    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/common/Chart/customHighlightPlugin.ts b/frontend/src/component/common/Chart/customHighlightPlugin.ts
index b4e8aad54e..16936e3c77 100644
--- a/frontend/src/component/common/Chart/customHighlightPlugin.ts
+++ b/frontend/src/component/common/Chart/customHighlightPlugin.ts
@@ -7,9 +7,10 @@ type CustomHighlightPluginOptions = {
 };
 
 const defaultCategoryPercentage = 0.8;
-export const categoryWidth = (chart: Chart) => {
+export const smartWidth = (chart: Chart) => {
+    const xAxisEntries = chart.data.datasets[0]?.data ?? chart.scales.x.ticks;
     return (
-        (chart.width / chart.scales.x.ticks.length) *
+        (chart.width / xAxisEntries.length) *
         (chart.options.datasets?.bar?.categoryPercentage ??
             defaultCategoryPercentage)
     );
@@ -22,7 +23,7 @@ export const customHighlightPlugin = (
     id: 'customLine',
     beforeDraw: (chart: Chart) => {
         const {
-            width = categoryWidth,
+            width = smartWidth,
             maxHighlightOpacity = 0.12,
             bottomOverflow = 0,
         } = options ?? {};