diff --git a/docs/configuration/title.md b/docs/configuration/title.md index 4e9f30f004b..3bd78c07d2a 100644 --- a/docs/configuration/title.md +++ b/docs/configuration/title.md @@ -13,7 +13,7 @@ Namespace: `options.plugins.title`, the global options for the chart title is de | `display` | `boolean` | `false` | Yes | Is the title shown? | `fullSize` | `boolean` | `true` | Yes | Marks that this box should take the full width/height of the canvas. If `false`, the box is sized and placed above/beside the chart area. | `position` | `string` | `'top'` | Yes | Position of title. [more...](#position) -| `font` | `Font` | `{style: 'bold'}` | Yes | See [Fonts](../general/fonts.md) +| `font` | `Font` | `{weight: 'bold'}` | Yes | See [Fonts](../general/fonts.md) | `padding` | [`Padding`](../general/padding.md) | `10` | Yes | Padding to apply around the title. Only `top` and `bottom` are implemented. | `text` | `string`\|`string[]` | `''` | Yes | Title text to display. If specified as an array, text is rendered on multiple lines. diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md index 145f083d90e..3c9764488de 100644 --- a/docs/configuration/tooltip.md +++ b/docs/configuration/tooltip.md @@ -16,7 +16,7 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips | `filter` | `function` | | Filter tooltip items. [more...](#filter-callback) | `backgroundColor` | [`Color`](../general/colors.md) | `'rgba(0, 0, 0, 0.8)'` | Background color of the tooltip. | `titleColor` | [`Color`](../general/colors.md) | `'#fff'` | Color of title text. -| `titleFont` | `Font` | `{style: 'bold'}` | See [Fonts](../general/fonts.md). +| `titleFont` | `Font` | `{weight: 'bold'}` | See [Fonts](../general/fonts.md). | `titleAlign` | `string` | `'left'` | Horizontal alignment of the title text lines. [more...](#alignment) | `titleSpacing` | `number` | `2` | Spacing to add to top and bottom of each title line. | `titleMarginBottom` | `number` | `6` | Margin to add on bottom of title section. @@ -25,7 +25,7 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips | `bodyAlign` | `string` | `'left'` | Horizontal alignment of the body text lines. [more...](#alignment) | `bodySpacing` | `number` | `2` | Spacing to add to top and bottom of each tooltip item. | `footerColor` | [`Color`](../general/colors.md) | `'#fff'` | Color of footer text. -| `footerFont` | `Font` | `{style: 'bold'}` | See [Fonts](../general/fonts.md). +| `footerFont` | `Font` | `{weight: 'bold'}` | See [Fonts](../general/fonts.md). | `footerAlign` | `string` | `'left'` | Horizontal alignment of the footer text lines. [more...](#alignment) | `footerSpacing` | `number` | `2` | Spacing to add to top and bottom of each footer line. | `footerMarginTop` | `number` | `6` | Margin to add before drawing the footer. diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md index 7390801c502..8491b3d87ae 100644 --- a/docs/getting-started/v3-migration.md +++ b/docs/getting-started/v3-migration.md @@ -147,7 +147,7 @@ options: { font: function(context) { if (context.tick && context.tick.major) { return { - style: 'bold', + weight: 'bold', color: '#FF0000' }; } @@ -186,7 +186,7 @@ options: { font: function(context) { if (context.tick && context.tick.major) { return { - style: 'bold' + weight: 'bold' }; } } diff --git a/docs/samples/scale-options/titles.md b/docs/samples/scale-options/titles.md index fdb1ea9a668..b8c1a9c364d 100644 --- a/docs/samples/scale-options/titles.md +++ b/docs/samples/scale-options/titles.md @@ -43,7 +43,7 @@ const config = { font: { family: 'Comic Sans MS', size: 20, - style: 'bold', + weight: 'bold', lineHeight: 1.2, }, padding: {top: 20, left: 0, right: 0, bottom: 0} @@ -59,7 +59,7 @@ const config = { family: 'Times', size: 20, style: 'normal', - lineHeight: 1.2, + lineHeight: 1.2 }, padding: {top: 30, left: 0, right: 0, bottom: 0} } diff --git a/docs/samples/scales/time-max-span.md b/docs/samples/scales/time-max-span.md index dc144c95e0b..25c509373ab 100644 --- a/docs/samples/scales/time-max-span.md +++ b/docs/samples/scales/time-max-span.md @@ -101,7 +101,7 @@ const config = { font: function(context) { if (context.tick && context.tick.major) { return { - style: 'bold', + weight: 'bold', }; } } diff --git a/src/helpers/helpers.options.js b/src/helpers/helpers.options.js index 70846e725ea..7453a54bc54 100644 --- a/src/helpers/helpers.options.js +++ b/src/helpers/helpers.options.js @@ -3,6 +3,7 @@ import {isArray, isObject, toDimension, valueOrDefault} from './helpers.core'; import {toFontString} from './helpers.canvas'; const LINE_HEIGHT = new RegExp(/^(normal|(\d+(?:\.\d+)?)(px|em|%)?)$/); +const FONT_STYLE = new RegExp(/^(normal|italic|initial|inherit|unset|(oblique( -?[0-9]?[0-9]deg)?))$/); /** * @alias Chart.helpers.options @@ -95,6 +96,7 @@ export function toPadding(value) { return obj; } + /** * Parses font options and returns the font object. * @param {object} options - A object that contains font options to be parsed. @@ -111,12 +113,17 @@ export function toFont(options, fallback) { if (typeof size === 'string') { size = parseInt(size, 10); } + let style = valueOrDefault(options.style, fallback.style); + if (style && !('' + style).match(FONT_STYLE)) { + console.warn('Invalid font style specified: "' + style + '"'); + style = ''; + } const font = { family: valueOrDefault(options.family, fallback.family), lineHeight: toLineHeight(valueOrDefault(options.lineHeight, fallback.lineHeight), size), size, - style: valueOrDefault(options.style, fallback.style), + style, weight: valueOrDefault(options.weight, fallback.weight), string: '' }; diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js index ba1f4ff67cf..f55abdfbe7b 100644 --- a/src/plugins/plugin.title.js +++ b/src/plugins/plugin.title.js @@ -148,7 +148,7 @@ export default { align: 'center', display: false, font: { - style: 'bold', + weight: 'bold', }, fullSize: true, padding: 10, diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index 419a8b8767c..d77c387372a 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -1143,7 +1143,7 @@ export default { backgroundColor: 'rgba(0,0,0,0.8)', titleColor: '#fff', titleFont: { - style: 'bold', + weight: 'bold', }, titleSpacing: 2, titleMarginBottom: 6, @@ -1157,7 +1157,7 @@ export default { footerSpacing: 2, footerMarginTop: 6, footerFont: { - style: 'bold', + weight: 'bold', }, footerAlign: 'left', padding: 6, diff --git a/test/fixtures/scale.timeseries/financial-daily.js b/test/fixtures/scale.timeseries/financial-daily.js index 465f70f3d19..52dcb9614d3 100644 --- a/test/fixtures/scale.timeseries/financial-daily.js +++ b/test/fixtures/scale.timeseries/financial-daily.js @@ -27,7 +27,7 @@ module.exports = { enabled: true, }, font: function(context) { - return context.tick && context.tick.major ? {style: 'bold'} : undefined; + return context.tick && context.tick.major ? {weight: 'bold'} : undefined; }, source: 'data', autoSkip: true, diff --git a/test/specs/helpers.options.tests.js b/test/specs/helpers.options.tests.js index a71c6f37fe6..c7186e1fb96 100644 --- a/test/specs/helpers.options.tests.js +++ b/test/specs/helpers.options.tests.js @@ -112,7 +112,7 @@ describe('Chart.helpers.options', function() { Object.assign(Chart.defaults.font, { family: 'foobar', size: 42, - style: 'xxxyyy', + style: 'oblique 9deg', lineHeight: 1.5 }); @@ -120,8 +120,8 @@ describe('Chart.helpers.options', function() { family: 'foobar', lineHeight: 63, size: 42, - string: 'xxxyyy 42px foobar', - style: 'xxxyyy', + string: 'oblique 9deg 42px foobar', + style: 'oblique 9deg', weight: null }); @@ -132,13 +132,13 @@ describe('Chart.helpers.options', function() { family: 'bla', lineHeight: 8, size: 21, - style: 'zzz' + style: 'oblique -90deg' })).toEqual({ family: 'bla', lineHeight: 8 * 21, size: 21, - string: 'zzz 21px bla', - style: 'zzz', + string: 'oblique -90deg 21px bla', + style: 'oblique -90deg', weight: null }); }); @@ -147,13 +147,13 @@ describe('Chart.helpers.options', function() { family: 'bla', lineHeight: 8, size: '21', - style: 'zzz' + style: 'italic' })).toEqual({ family: 'bla', lineHeight: 8 * 21, size: 21, - string: 'zzz 21px bla', - style: 'zzz', + string: 'italic 21px bla', + style: 'italic', weight: null }); }); diff --git a/test/specs/plugin.title.tests.js b/test/specs/plugin.title.tests.js index 7c1c25849cf..564c509278b 100644 --- a/test/specs/plugin.title.tests.js +++ b/test/specs/plugin.title.tests.js @@ -14,7 +14,7 @@ describe('Plugin.title', function() { fullSize: true, weight: 2000, font: { - style: 'bold' + weight: 'bold' }, padding: 10, text: '' @@ -139,7 +139,7 @@ describe('Plugin.title', function() { args: [0] }, { name: 'setFont', - args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"], + args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"], }, { name: 'setFillStyle', args: ['#666'] @@ -200,7 +200,7 @@ describe('Plugin.title', function() { args: [-0.5 * Math.PI] }, { name: 'setFont', - args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"], + args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"], }, { name: 'setFillStyle', args: ['#666'] @@ -242,7 +242,7 @@ describe('Plugin.title', function() { args: [0.5 * Math.PI] }, { name: 'setFont', - args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"], + args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"], }, { name: 'setFillStyle', args: ['#666'] diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js index d7bc06682df..9cf619c5efa 100644 --- a/test/specs/plugin.tooltip.tests.js +++ b/test/specs/plugin.tooltip.tests.js @@ -104,7 +104,7 @@ describe('Plugin.Tooltip', function() { expect(tooltip.options.titleColor).toEqual('#fff'); expect(tooltip.options.titleFont).toEqualOptions({ family: defaults.font.family, - style: 'bold', + weight: 'bold', size: defaults.font.size, }); @@ -117,7 +117,7 @@ describe('Plugin.Tooltip', function() { expect(tooltip.options.footerColor).toEqual('#fff'); expect(tooltip.options.footerFont).toEqualOptions({ family: defaults.font.family, - style: 'bold', + weight: 'bold', size: defaults.font.size, }); @@ -269,7 +269,7 @@ describe('Plugin.Tooltip', function() { expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ family: defaults.font.family, - style: 'bold', + weight: 'bold', size: defaults.font.size, })); @@ -281,7 +281,7 @@ describe('Plugin.Tooltip', function() { expect(tooltip.options.footerFont).toEqualOptions({ family: defaults.font.family, - style: 'bold', + weight: 'bold', size: defaults.font.size, }); @@ -422,7 +422,7 @@ describe('Plugin.Tooltip', function() { expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ family: defaults.font.family, - style: 'bold', + weight: 'bold', size: defaults.font.size, })); @@ -433,7 +433,7 @@ describe('Plugin.Tooltip', function() { expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ family: defaults.font.family, - style: 'bold', + weight: 'bold', size: defaults.font.size, })); @@ -1251,7 +1251,7 @@ describe('Plugin.Tooltip', function() { expect(tooltip.options.titleFont).toEqualOptions({ family: defaults.font.family, - style: 'bold', + weight: 'bold', size: defaults.font.size, }); @@ -1263,7 +1263,7 @@ describe('Plugin.Tooltip', function() { expect(tooltip.options.footerFont).toEqualOptions({ family: defaults.font.family, - style: 'bold', + weight: 'bold', size: defaults.font.size, }); @@ -1341,7 +1341,7 @@ describe('Plugin.Tooltip', function() { // Title titleFont: { family: defaults.font.family, - style: 'bold', + weight: 'bold', size: defaults.font.size, }, titleColor: '#fff', @@ -1352,7 +1352,7 @@ describe('Plugin.Tooltip', function() { // Footer footerFont: { family: defaults.font.family, - style: 'bold', + weight: 'bold', size: defaults.font.size, }, footerColor: '#fff', @@ -1440,7 +1440,7 @@ describe('Plugin.Tooltip', function() { {name: 'setTextAlign', args: ['left']}, {name: 'setTextBaseline', args: ['middle']}, {name: 'setFillStyle', args: ['#fff']}, - {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, + {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, {name: 'fillText', args: ['title', 105, 112.2]}, {name: 'setTextAlign', args: ['left']}, {name: 'setTextBaseline', args: ['middle']}, @@ -1451,7 +1451,7 @@ describe('Plugin.Tooltip', function() { {name: 'setTextAlign', args: ['left']}, {name: 'setTextBaseline', args: ['middle']}, {name: 'setFillStyle', args: ['#fff']}, - {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, + {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, {name: 'fillText', args: ['footer', 105, 153]}, {name: 'restore', args: []} ])); @@ -1466,7 +1466,7 @@ describe('Plugin.Tooltip', function() { {name: 'setTextAlign', args: ['right']}, {name: 'setTextBaseline', args: ['middle']}, {name: 'setFillStyle', args: ['#fff']}, - {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, + {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, {name: 'fillText', args: ['title', 195, 112.2]}, {name: 'setTextAlign', args: ['right']}, {name: 'setTextBaseline', args: ['middle']}, @@ -1477,7 +1477,7 @@ describe('Plugin.Tooltip', function() { {name: 'setTextAlign', args: ['right']}, {name: 'setTextBaseline', args: ['middle']}, {name: 'setFillStyle', args: ['#fff']}, - {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, + {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, {name: 'fillText', args: ['footer', 195, 153]}, {name: 'restore', args: []} ])); @@ -1492,7 +1492,7 @@ describe('Plugin.Tooltip', function() { {name: 'setTextAlign', args: ['center']}, {name: 'setTextBaseline', args: ['middle']}, {name: 'setFillStyle', args: ['#fff']}, - {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, + {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, {name: 'fillText', args: ['title', 150, 112.2]}, {name: 'setTextAlign', args: ['center']}, {name: 'setTextBaseline', args: ['middle']}, @@ -1503,7 +1503,7 @@ describe('Plugin.Tooltip', function() { {name: 'setTextAlign', args: ['center']}, {name: 'setTextBaseline', args: ['middle']}, {name: 'setFillStyle', args: ['#fff']}, - {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, + {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, {name: 'fillText', args: ['footer', 150, 153]}, {name: 'restore', args: []} ])); @@ -1518,7 +1518,7 @@ describe('Plugin.Tooltip', function() { {name: 'setTextAlign', args: ['right']}, {name: 'setTextBaseline', args: ['middle']}, {name: 'setFillStyle', args: ['#fff']}, - {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, + {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, {name: 'fillText', args: ['title', 195, 112.2]}, {name: 'setTextAlign', args: ['center']}, {name: 'setTextBaseline', args: ['middle']}, @@ -1529,7 +1529,7 @@ describe('Plugin.Tooltip', function() { {name: 'setTextAlign', args: ['left']}, {name: 'setTextBaseline', args: ['middle']}, {name: 'setFillStyle', args: ['#fff']}, - {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, + {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]}, {name: 'fillText', args: ['footer', 105, 153]}, {name: 'restore', args: []} ])); diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index a0535beb3da..51ec1f7f622 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2434,7 +2434,7 @@ export interface TooltipOptions extends CoreInteraction titleColor: Scriptable>; /** * See Fonts - * @default {style: 'bold'} + * @default {weight: 'bold'} */ titleFont: Scriptable>; /** @@ -2489,7 +2489,7 @@ export interface TooltipOptions extends CoreInteraction footerColor: Scriptable>; /** * See Fonts - * @default {style: 'bold'} + * @default {weight: 'bold'} */ footerFont: Scriptable>; /**