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

diff --git a/.gitignore b/.gitignore
index c731872efa5dbbe9bca02f130e209f8aeadea521..828d3f91bd045b10a01500f4e700ad78b7d3e779 100644 (file)
--- 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 98583e964fd44490cf33cfa586e3918708577128..2c4a7f4b206264bac3f420075cbd47d968e34064 100644 (file)
--- 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 dcf4bd00b2b8091841295716366a1ddccad49dfb..e81b6b933bf2871846a9cb6ad7695c4b56ea013e 100644 (file)
--- 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 3b373620c0fcafd588f8a3fd6637a9ce8f0a7a50..911b4cb2bc8dee3780bce98bb719084a6d72e1fa 100644 (file)
--- 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 caa3c8f32ea789154b88df5881ce3572c7e9ce19..a388e7c9ca5d0a335b23cba38a809dc08d1181a2 100644 (file)
--- 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();
+    });
+  });
 });