From e8c58daf72341c006313ee891facad326ac1c2a9 Mon Sep 17 00:00:00 2001
From: asmenezes <27907651+asmenezes@users.noreply.github.com>
Date: Mon, 20 Oct 2025 18:37:39 -0400
Subject: [PATCH] Enable scale title stroke (12092) (#12130)

* Enable text stroke on scale titles

* update documentation

* specify stroke width units

* Simplify usage of strokeColor and strokeWidth

* Add scale title stroke test

* Enable text stroke on scale titles

* update documentation

* specify stroke width units

* Simplify usage of strokeColor and strokeWidth

* Add scale title stroke test

* Implement non image based tests

* Remove image based test
---
 .gitignore                     |  1 +
 docs/axes/labelling.md         |  2 +
 src/core/core.scale.js         |  2 +
 src/types/index.d.ts           |  4 ++
 test/specs/core.scale.tests.js | 80 ++++++++++++++++++++++++++++++++++
 5 files changed, 89 insertions(+)

diff --git a/.gitignore b/.gitignore
index c731872ef..828d3f91b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ docs/.vuepress/dist
 .project
 .settings
 .vscode
+.zed
 *.log
 *.swp
 *.stackdump
diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md
index 98583e964..2c4a7f4b2 100644
--- a/docs/axes/labelling.md
+++ b/docs/axes/labelling.md
@@ -12,6 +12,8 @@ Namespace: `options.scales[scaleId].title`, it defines options for the scale tit
 | `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'`
 | `text` | `string`\|`string[]` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
 | `color` | [`Color`](../general/colors.md) | `Chart.defaults.color` | Color of label.
+| `strokeColor` | [`Color`](../general/colors.md) |  | Color of text stroke.
+| `strokeWidth` | `number` |  | Size of stroke width, in pixels.
 | `font` | `Font` | `Chart.defaults.font` | See [Fonts](../general/fonts.md)
 | `padding` | [`Padding`](../general/padding.md) | `4` | Padding to apply around scale labels. Only `top`, `bottom` and `y` are implemented.
 
diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index dcf4bd00b..e81b6b933 100644
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -1615,6 +1615,8 @@ export default class Scale extends Element {
       textAlign: titleAlign(align, position, reverse),
       textBaseline: 'middle',
       translation: [titleX, titleY],
+      strokeColor: title.strokeColor,
+      strokeWidth: title.strokeWidth
     });
   }
 
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 3b373620c..911b4cb2b 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -3270,6 +3270,10 @@ export interface CartesianScaleOptions extends CoreScaleOptions {
     text: string | string[];
     /** Color of the axis label. */
     color: Color;
+    /** The color of the text stroke for the axis label.*/
+    strokeColor?: Color;
+    /** The text stroke width for the axis label.*/
+    strokeWidth?: number;
     /** Information about the axis title font. */
     font: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableCartesianScaleContext>;
     /** Padding to apply around scale labels. */
diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js
index caa3c8f32..a388e7c9c 100644
--- a/test/specs/core.scale.tests.js
+++ b/test/specs/core.scale.tests.js
@@ -817,4 +817,84 @@ describe('Core.scale', function() {
       }
     });
   });
+  describe('Scale Title stroke', ()=>{
+    function getChartWithScaleTitleStroke() {
+      return window.acquireChart({
+        type: 'line',
+        options: {
+          scales: {
+            x: {
+              type: 'linear',
+              title: {
+                display: true,
+                text: 'title-x',
+                color: '#ddd',
+                strokeWidth: 1,
+                strokeColor: '#333'
+              }
+            },
+            y: {
+              type: 'linear',
+              title: {
+                display: true,
+                text: 'title-y',
+                color: '#ddd',
+                strokeWidth: 2,
+                strokeColor: '#222'
+              }
+            }
+          }
+        }
+      });
+    }
+
+    function getChartWithoutScaleTitleStroke() {
+      return window.acquireChart({
+        type: 'line',
+        options: {
+          scales: {
+            x: {
+              type: 'linear',
+              title: {
+                display: true,
+                text: 'title-x',
+                color: '#ddd'
+              }
+            },
+            y: {
+              type: 'linear',
+              title: {
+                display: true,
+                text: 'title-y',
+                color: '#ddd'
+              }
+            }
+          }
+        }
+      });
+    }
+
+    it('should draw a scale title stroke when provided x-axis', function() {
+      var chart = getChartWithScaleTitleStroke();
+      var scale = chart.scales.x;
+      expect(scale.options.title.strokeColor).toEqual('#333');
+      expect(scale.options.title.strokeWidth).toEqual(1);
+    });
+
+    it('should draw a scale title stroke when provided y-axis', function() {
+      var chart = getChartWithScaleTitleStroke();
+      var scale = chart.scales.y;
+      expect(scale.options.title.strokeColor).toEqual('#222');
+      expect(scale.options.title.strokeWidth).toEqual(2);
+    });
+
+    it('should not draw a scale title stroke when not provided', function() {
+      var chart = getChartWithoutScaleTitleStroke();
+      var scales = chart.scales;
+      expect(scales.y.options.title.strokeColor).toBeUndefined();
+      expect(scales.y.options.title.strokeWidth).toBeUndefined();
+      expect(scales.x.options.title.strokeColor).toBeUndefined();
+      expect(scales.x.options.title.strokeWidth).toBeUndefined();
+    });
+  });
 });
-- 
2.47.3