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

@@ -26,6 +26,7 @@ docs/.vuepress/dist
 .project
 .settings
 .vscode
+.zed
 *.log
 *.swp
 *.stackdump

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.
 

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
     });
   }
 

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. */

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();
+    });
+  });
 });