diff --git a/docs/axes/_common_ticks.md b/docs/axes/_common_ticks.md index 94e22f5a90d..1c17aba395b 100644 --- a/docs/axes/_common_ticks.md +++ b/docs/axes/_common_ticks.md @@ -4,12 +4,15 @@ Namespace: `options.scales[scaleId].ticks` | Name | Type | Scriptable | Default | Description | ---- | ---- | :-------------------------------: | ------- | ----------- +| `backdropColor` | [`Color`](../../general/colors.md) | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops. +| `backdropPadding` | [`Padding`](../../general/padding.md) | Yes | `2` | Padding of label backdrop. | `callback` | `function` | | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](/axes/labelling.md#creating-custom-tick-formats). | `display` | `boolean` | | `true` | If true, show tick labels. | `color` | [`Color`](/general/colors.md) | Yes | `Chart.defaults.color` | Color of ticks. | `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](/general/fonts.md) | `major` | `object` | | `{}` | [Major ticks configuration](/axes/styling.md#major-tick-configuration). | `padding` | `number` | | `3` | Sets the offset of the tick labels from the axis +| `showLabelBackdrop` | `boolean` | Yes | `true` for radial scale, `false` otherwise | If true, draw a background behind the tick labels. | `textStrokeColor` | [`Color`](/general/colors.md) | Yes | `` | The color of the stroke around the text. | `textStrokeWidth` | `number` | Yes | `0` | Stroke width 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. diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md index ea6071b5e65..2d1c0e35703 100644 --- a/docs/axes/radial/linear.md +++ b/docs/axes/radial/linear.md @@ -28,14 +28,11 @@ Namespace: `options.scales[scaleId].ticks` | Name | Type | Scriptable | Default | Description | ---- | ---- | ------- | ------- | ----------- -| `backdropColor` | [`Color`](../../general/colors.md) | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops. -| `backdropPadding` | [`Padding`](../../general/padding.md) | Yes | `2` | Padding of label backdrop. | `count` | `number` | Yes | `undefined` | The number of ticks to generate. If specified, this overrides the automatic generation. | `format` | `object` | Yes | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter | `maxTicksLimit` | `number` | Yes | `11` | Maximum number of ticks and gridlines to show. | `precision` | `number` | Yes | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places. | `stepSize` | `number` | Yes | | User defined fixed step size for the scale. [more...](#step-size) -| `showLabelBackdrop` | `boolean` | Yes | `true` | If true, draw a background behind the tick labels. !!!include(axes/_common_ticks.md)!!! diff --git a/src/core/core.scale.defaults.js b/src/core/core.scale.defaults.js index 490b09454a2..960d1794962 100644 --- a/src/core/core.scale.defaults.js +++ b/src/core/core.scale.defaults.js @@ -71,6 +71,10 @@ defaults.set('scale', { major: {}, align: 'center', crossAlign: 'near', + + showLabelBackdrop: false, + backdropColor: 'rgba(255, 255, 255, 0.75)', + backdropPadding: 2, } }); diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 2eda295df0a..95ff5f8b84c 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -773,7 +773,7 @@ export default class Scale extends Element { } /** - * @return {{ first: object, last: object, widest: object, highest: object }} + * @return {{ first: object, last: object, widest: object, highest: object, widths: Array, heights: array }} * @private */ _getLabelSizes() { @@ -796,7 +796,7 @@ export default class Scale extends Element { /** * Returns {width, height, offset} objects for the first, last, widest, highest tick * labels where offset indicates the anchor point offset from the top in pixels. - * @return {{ first: object, last: object, widest: object, highest: object }} + * @return {{ first: object, last: object, widest: object, highest: object, widths: Array, heights: array }} * @private */ _computeLabelSizes(ticks, length) { @@ -845,7 +845,9 @@ export default class Scale extends Element { first: valueAt(0), last: valueAt(length - 1), widest: valueAt(widest), - highest: valueAt(highest) + highest: valueAt(highest), + widths, + heights, }; } @@ -1226,6 +1228,48 @@ export default class Scale extends Element { textOffset = (1 - lineCount) * lineHeight / 2; } + let backdrop; + + if (optsAtIndex.showLabelBackdrop) { + const labelPadding = toPadding(optsAtIndex.backdropPadding); + const height = labelSizes.heights[i]; + const width = labelSizes.widths[i]; + + let top = y + textOffset - labelPadding.top; + let left = x - labelPadding.left; + + switch (textBaseline) { + case 'middle': + top -= height / 2; + break; + case 'bottom': + top -= height; + break; + default: + break; + } + + switch (textAlign) { + case 'center': + left -= width / 2; + break; + case 'right': + left -= width; + break; + default: + break; + } + + backdrop = { + left, + top, + width: width + labelPadding.width, + height: height + labelPadding.height, + + color: optsAtIndex.backdropColor, + }; + } + items.push({ rotation, label, @@ -1236,7 +1280,8 @@ export default class Scale extends Element { textOffset, textAlign, textBaseline, - translation: [x, y] + translation: [x, y], + backdrop, }); } @@ -1466,6 +1511,12 @@ export default class Scale extends Element { const item = items[i]; const tickFont = item.font; const label = item.label; + + if (item.backdrop) { + ctx.fillStyle = item.backdrop.color; + ctx.fillRect(item.backdrop.left, item.backdrop.top, item.backdrop.width, item.backdrop.height); + } + let y = item.textOffset; renderText(ctx, label, 0, y, tickFont, item); } diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 52777619a09..a12acb2b105 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -594,12 +594,6 @@ RadialLinearScale.defaults = { // Boolean - Show a backdrop to the scale label showLabelBackdrop: true, - // String - The colour of the label backdrop - backdropColor: 'rgba(255,255,255,0.75)', - - // Number/Object - The backdrop padding of the label in pixels - backdropPadding: 2, - callback: Ticks.formatters.numeric }, diff --git a/test/fixtures/core.scale/tick-backdrop.js b/test/fixtures/core.scale/tick-backdrop.js new file mode 100644 index 00000000000..feeee9a4718 --- /dev/null +++ b/test/fixtures/core.scale/tick-backdrop.js @@ -0,0 +1,76 @@ +const grid = { + display: false +}; +const title = { + display: false, +}; +module.exports = { + config: { + type: 'line', + options: { + events: [], + scales: { + top: { + type: 'linear', + position: 'top', + ticks: { + display: true, + showLabelBackdrop: true, + backdropColor: 'red', + backdropPadding: 5, + align: 'start', + crossAlign: 'near', + }, + grid, + title + }, + left: { + type: 'linear', + position: 'left', + ticks: { + display: true, + showLabelBackdrop: true, + backdropColor: 'green', + backdropPadding: 5, + crossAlign: 'center', + }, + grid, + title + }, + bottom: { + type: 'linear', + position: 'bottom', + ticks: { + display: true, + showLabelBackdrop: true, + backdropColor: 'blue', + backdropPadding: 5, + align: 'end', + crossAlign: 'far', + }, + grid, + title + }, + right: { + type: 'linear', + position: 'right', + ticks: { + display: true, + showLabelBackdrop: true, + backdropColor: 'gray', + backdropPadding: 5, + }, + grid, + title + }, + } + } + }, + options: { + canvas: { + height: 256, + width: 256 + }, + spriteText: true, + } +}; diff --git a/test/fixtures/core.scale/tick-backdrop.png b/test/fixtures/core.scale/tick-backdrop.png new file mode 100644 index 00000000000..d6c79096e2b Binary files /dev/null and b/test/fixtures/core.scale/tick-backdrop.png differ diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js index 75cbfd5e795..b2e545b58ae 100644 --- a/test/specs/scale.radialLinear.tests.js +++ b/test/specs/scale.radialLinear.tests.js @@ -36,8 +36,6 @@ describe('Test the radial linear scale', function() { ticks: { color: Chart.defaults.color, showLabelBackdrop: true, - backdropColor: 'rgba(255,255,255,0.75)', - backdropPadding: 2, callback: defaultConfig.ticks.callback }, diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index f700c0738a3..1b9c405378e 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2693,6 +2693,17 @@ export interface GridLineOptions { } export interface TickOptions { + /** + * Color of label backdrops. + * @default 'rgba(255, 255, 255, 0.75)' + */ + backdropColor: Scriptable; + /** + * Padding of tick backdrop. + * @default 2 + */ + backdropPadding: number | ChartArea; + /** * Returns the string representation of the tick value as it should be displayed on the chart. See callback. */ @@ -2715,6 +2726,11 @@ export interface TickOptions { * Sets the offset of the tick labels from the axis */ padding: number; + /** + * If true, draw a background behind the tick labels. + * @default false + */ + showLabelBackdrop: Scriptable; /** * The color of the stroke around the text. * @default undefined @@ -3116,17 +3132,6 @@ export type RadialLinearScaleOptions = CoreScaleOptions & { suggestedMin: number; ticks: TickOptions & { - /** - * Color of label backdrops. - * @default 'rgba(255, 255, 255, 0.75)' - */ - backdropColor: Scriptable; - /** - * Padding of label backdrop. - * @default 2 - */ - backdropPadding: number | ChartArea; - /** * The Intl.NumberFormat options used by the default label formatter */ @@ -3152,12 +3157,6 @@ export type RadialLinearScaleOptions = CoreScaleOptions & { * User defined number of ticks */ count: number; - - /** - * If true, draw a background behind the tick labels. - * @default true - */ - showLabelBackdrop: Scriptable; }; };