Add stroke lines option around ticks to improve readability (#6787)

Enable stroking of text on of axis labels
chartjs · Jan 12, 2020 · b1421c6 · b1421c6
1 parent f1677b6
commit b1421c6
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 1 deletion.
diff --git a/docs/axes/styling.md b/docs/axes/styling.md
@@ -45,9 +45,11 @@ The tick configuration is nested under the scale configuration in the `ticks` ke
 | `fontStyle` | `string` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
 | `lineHeight` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
 | `reverse` | `boolean` | `false` | Reverses order of tick labels.
+| `lineWidth` | `number` | `0` | Stroke width around the text.
 | `minor` | `object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above.
 | `major` | `object` | `{}` | Major ticks configuration. Omitted options are inherited from options above.
 | `padding` | `number` | `0` | Sets the offset of the tick labels from the axis
+| `strokeStyle` | `string` | `` | The color of the stroke around the text.
 | `z` | `number` | `0` | z-index of tick layer. Useful when ticks are drawn on chart area. Values &lt;= 0 are drawn under datasets, &gt; 0 on top.
 
 ## Minor Tick Configuration

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
@@ -52,6 +52,8 @@ defaults._set('scale', {
 		minRotation: 0,
 		maxRotation: 50,
 		mirror: false,
+		lineWidth: 0,
+		strokeStyle: '',
 		padding: 0,
 		display: true,
 		autoSkip: true,
@@ -140,7 +142,9 @@ function parseFontOptions(options, nestedOpts) {
 		fontStyle: valueOrDefault(nestedOpts.fontStyle, options.fontStyle),
 		lineHeight: valueOrDefault(nestedOpts.lineHeight, options.lineHeight)
 	}), {
-		color: resolve([nestedOpts.fontColor, options.fontColor, defaults.fontColor])
+		color: resolve([nestedOpts.fontColor, options.fontColor, defaults.fontColor]),
+		lineWidth: valueOrDefault(nestedOpts.lineWidth, options.lineWidth),
+		strokeStyle: valueOrDefault(nestedOpts.strokeStyle, options.strokeStyle)
 	});
 }
 
@@ -1272,6 +1276,7 @@ class Scale extends Element {
 		for (i = 0, ilen = items.length; i < ilen; ++i) {
 			const item = items[i];
 			const tickFont = item.font;
+			const useStroke = tickFont.lineWidth > 0 && tickFont.strokeStyle !== '';
 
 			// Make sure we draw text in the correct color and font
 			ctx.save();
@@ -1282,15 +1287,26 @@ class Scale extends Element {
 			ctx.textBaseline = 'middle';
 			ctx.textAlign = item.textAlign;
 
+			if (useStroke) {
+				ctx.strokeStyle = tickFont.strokeStyle;
+				ctx.lineWidth = tickFont.lineWidth;
+			}
+
 			const label = item.label;
 			let y = item.textOffset;
 			if (isArray(label)) {
 				for (j = 0, jlen = label.length; j < jlen; ++j) {
 					// We just make sure the multiline element is a string here..
+					if (useStroke) {
+						ctx.strokeText('' + label[j], 0, y);
+					}
 					ctx.fillText('' + label[j], 0, y);
 					y += tickFont.lineHeight;
 				}
 			} else {
+				if (useStroke) {
+					ctx.strokeText(label, 0, y);
+				}
 				ctx.fillText(label, 0, y);
 			}
 			ctx.restore();

diff --git a/test/context.js b/test/context.js
@@ -94,6 +94,7 @@ Context.prototype._initMethods = function() {
 		fill: function() {},
 		fillRect: function() {},
 		fillText: function() {},
+		strokeText: function() {},
 		lineTo: function() {},
 		measureText: function(text) {
 			// return the number of characters * fixed size

diff --git a/test/specs/scale.category.tests.js b/test/specs/scale.category.tests.js
@@ -48,6 +48,8 @@ describe('Category scale tests', function() {
 				labelOffset: 0,
 				minor: {},
 				major: {},
+				lineWidth: 0,
+				strokeStyle: '',
 			}
 		});
 

diff --git a/test/specs/scale.linear.tests.js b/test/specs/scale.linear.tests.js
@@ -41,6 +41,8 @@ describe('Linear Scale', function() {
 				labelOffset: 0,
 				minor: {},
 				major: {},
+				lineWidth: 0,
+				strokeStyle: '',
 			}
 		});
 

diff --git a/test/specs/scale.logarithmic.tests.js b/test/specs/scale.logarithmic.tests.js
@@ -40,6 +40,8 @@ describe('Logarithmic Scale tests', function() {
 				autoSkipPadding: 0,
 				labelOffset: 0,
 				minor: {},
+				lineWidth: 0,
+				strokeStyle: '',
 				major: {
 					enabled: true
 				},

diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js
@@ -63,6 +63,8 @@ describe('Test the radial linear scale', function() {
 				labelOffset: 0,
 				minor: {},
 				major: {},
+				lineWidth: 0,
+				strokeStyle: '',
 			},
 		});
 

diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js
@@ -94,6 +94,8 @@ describe('Time scale tests', function() {
 				major: {
 					enabled: false
 				},
+				lineWidth: 0,
+				strokeStyle: '',
 			},
 			time: {
 				parser: false,