diff --git a/docs/axes/styling.md b/docs/axes/styling.md index fa0a619fd7e..87edac46b91 100644 --- 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` | number|string | `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 <= 0 are drawn under datasets, > 0 on top. ## Minor Tick Configuration diff --git a/src/core/core.scale.js b/src/core/core.scale.js index d7bb417a1ff..01aa7178464 100644 --- 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 88966f230fe..42b399d9f36 100644 --- 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 daf69e7ffd0..4a0ff03a009 100644 --- 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 389235f5f8e..37630e2145f 100644 --- 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 e8b9694c77d..6fa8a1280a5 100644 --- 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 a64157a7e69..6c046568fdd 100644 --- 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 53428d9b845..94efd9731f0 100644 --- 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,