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

Enable stroking of text on of axis labels

diff --git a/docs/axes/styling.md b/docs/axes/styling.md
index fa0a619fd7e6a98f8d2dc894af66f30850fd438b..87edac46b9182f5c119e04d777ddd5ced4a1c732 100644 (file)
--- 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
index d7bb417a1ff32e871035d01d2d7c3b381daaec87..01aa71784641bd1eae04bdcff144cb025a652652 100644 (file)
--- 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
index 88966f230fe5f5f1a99a962596ae6281ffee0978..42b399d9f366b036bdee4fe1b2316791d68444d5 100644 (file)
--- 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
index daf69e7ffd047b0839e34ab1f7e2d58d9c99619f..4a0ff03a0098a3fb2c89587ca01bb1242e2443b2 100644 (file)
--- 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
index 389235f5f8e2893e2ee6909c573cf2972ad58d97..37630e2145f88a32fdd05b6f386701a197a87be4 100644 (file)
--- 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
index e8b9694c77d743a9807465340f08906e4ef8f9c9..6fa8a1280a59f5b3d505bfd67353b603ad9584d5 100644 (file)
--- 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
index d8a50712f76d8ee17b998b0f8a3f4885e23e5078..6c99a7079125c94f4aa95663c81530f5f553c5c0 100644 (file)
--- 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
index 53428d9b845bf5b5638010d95a9fa6efd3b8a293..94efd9731f00f390afecc72bd6b2f6689e57056a 100644 (file)
--- 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,