mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Align font options with CSS (#8066)
* Align font options with CSS * Review comments
This commit is contained in:
parent
f96fa2b96d
commit
ddc72fcfbb
@ -7,4 +7,6 @@
|
||||
| `font` | `Font` | Yes | `defaults.font` | See [Fonts](../general/fonts.md)
|
||||
| `major` | `object` | | `{}` | [Major ticks configuration](./styling.mdx#major-tick-configuration).
|
||||
| `padding` | `number` | | `0` | Sets the offset of the tick labels from the axis
|
||||
| `textStrokeColor` | `string` | `` | The color of the stroke around the text.
|
||||
| `textStrokeWidth` | `number` | `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.
|
||||
|
||||
@ -7,7 +7,7 @@ There are special global settings that can change all of the fonts on the chart.
|
||||
For example, in this chart the text will all be red except for the labels in the legend.
|
||||
|
||||
```javascript
|
||||
Chart.defaults.font.color = 'red';
|
||||
Chart.defaults.font.size = 16;
|
||||
let chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
@ -16,7 +16,7 @@ let chart = new Chart(ctx, {
|
||||
labels: {
|
||||
// This more specific font property overrides the global property
|
||||
font: {
|
||||
color: 'black'
|
||||
size: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -26,14 +26,11 @@ let chart = new Chart(ctx, {
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `color` | `Color` | `'#666'` | Default font color for all text.
|
||||
| `family` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text, follows CSS font-family options.
|
||||
| `size` | `number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
|
||||
| `style` | `string` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title. Follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
|
||||
| `weight` | `string` | `undefined` | Default font weight (boldness). (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)).
|
||||
| `lineHeight` | <code>number|string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
|
||||
| `lineWidth` | `number` | `0` | Stroke width around the text. Currently only supported by [ticks](../axes/styling#tick-configuration).
|
||||
| `strokeStyle` | `string` | `` | The color of the stroke around the text. Currently only supported by [ticks](../axes/styling#tick-configuration).
|
||||
|
||||
## Missing Fonts
|
||||
|
||||
|
||||
@ -101,8 +101,8 @@ A number of changes were made to the configuration options passed to the `Chart`
|
||||
* `global` namespace was removed from `defaults`. So `Chart.defaults.global` is now `Chart.defaults`
|
||||
* Dataset controller defaults were relocate to `controllers`. For example `Chart.defaults.line` is now `Chart.defaults.controllers.line`
|
||||
* `default` prefix was removed from defaults. For example `Chart.defaults.global.defaultColor` is now `Chart.defaults.color`
|
||||
* `defaultColor` was renamed to `color`
|
||||
* `defaultFontColor` was renamed to `font.color`
|
||||
* `defaultColor` was split to `color`, `borderColor` and `backgroundColor`
|
||||
* `defaultFontColor` was renamed to `color`
|
||||
* `defaultFontFamily` was renamed to `font.family`
|
||||
* `defaultFontSize` was renamed to `font.size`
|
||||
* `defaultFontStyle` was renamed to `font.style`
|
||||
@ -169,11 +169,11 @@ options: {
|
||||
major: {
|
||||
enabled: true
|
||||
},
|
||||
color: (context) => context.tick && context.tick.major && '#FF0000',
|
||||
font: function(context) {
|
||||
if (context.tick && context.tick.major) {
|
||||
return {
|
||||
style: 'bold',
|
||||
color: '#FF0000'
|
||||
style: 'bold'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,10 @@ function getScope(node, key) {
|
||||
*/
|
||||
export class Defaults {
|
||||
constructor() {
|
||||
this.color = 'rgba(0,0,0,0.1)';
|
||||
this.backgroundColor = 'rgba(0,0,0,0.1)';
|
||||
this.borderColor = 'rgba(0,0,0,0.1)';
|
||||
this.color = '#666';
|
||||
this.controllers = {};
|
||||
this.elements = {};
|
||||
this.events = [
|
||||
'mousemove',
|
||||
@ -33,31 +36,27 @@ export class Defaults {
|
||||
'touchmove'
|
||||
];
|
||||
this.font = {
|
||||
color: '#666',
|
||||
family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
|
||||
size: 12,
|
||||
style: 'normal',
|
||||
lineHeight: 1.2,
|
||||
weight: null,
|
||||
lineWidth: 0,
|
||||
strokeStyle: undefined
|
||||
weight: null
|
||||
};
|
||||
this.hover = {
|
||||
onHover: null
|
||||
};
|
||||
this.interaction = {
|
||||
mode: 'nearest',
|
||||
intersect: true
|
||||
};
|
||||
this.hover = {
|
||||
onHover: null
|
||||
};
|
||||
this.maintainAspectRatio = true;
|
||||
this.onHover = null;
|
||||
this.onClick = null;
|
||||
this.responsive = true;
|
||||
this.showLine = true;
|
||||
this.plugins = {};
|
||||
this.responsive = true;
|
||||
this.scale = undefined;
|
||||
this.scales = {};
|
||||
this.controllers = {};
|
||||
this.showLine = true;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -29,7 +29,6 @@ defaults.set('scale', {
|
||||
// grid line settings
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(0,0,0,0.1)',
|
||||
lineWidth: 1,
|
||||
drawBorder: true,
|
||||
drawOnChartArea: true,
|
||||
@ -76,6 +75,10 @@ defaults.set('scale', {
|
||||
}
|
||||
});
|
||||
|
||||
defaults.route('scale.ticks', 'color', '', 'color');
|
||||
defaults.route('scale.gridLines', 'color', '', 'borderColor');
|
||||
defaults.route('scale.scaleLabel', 'color', '', 'color');
|
||||
|
||||
/**
|
||||
* Returns a new array containing numItems from arr
|
||||
* @param {any[]} arr
|
||||
@ -1402,6 +1405,7 @@ export default class Scale extends Element {
|
||||
rotation,
|
||||
label,
|
||||
font,
|
||||
color: optionTicks.color,
|
||||
textOffset,
|
||||
textAlign,
|
||||
textBaseline,
|
||||
@ -1574,20 +1578,20 @@ export default 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 !== '';
|
||||
const useStroke = optionTicks.textStrokeWidth > 0 && optionTicks.textStrokeColor !== '';
|
||||
|
||||
// Make sure we draw text in the correct color and font
|
||||
ctx.save();
|
||||
ctx.translate(item.x, item.y);
|
||||
ctx.rotate(item.rotation);
|
||||
ctx.font = tickFont.string;
|
||||
ctx.fillStyle = tickFont.color;
|
||||
ctx.fillStyle = item.color;
|
||||
ctx.textAlign = item.textAlign;
|
||||
ctx.textBaseline = item.textBaseline;
|
||||
|
||||
if (useStroke) {
|
||||
ctx.strokeStyle = tickFont.strokeStyle;
|
||||
ctx.lineWidth = tickFont.lineWidth;
|
||||
ctx.strokeStyle = optionTicks.textStrokeColor;
|
||||
ctx.lineWidth = optionTicks.textStrokeWidth;
|
||||
}
|
||||
|
||||
const label = item.label;
|
||||
@ -1678,7 +1682,7 @@ export default class Scale extends Element {
|
||||
ctx.rotate(rotation);
|
||||
ctx.textAlign = textAlign;
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillStyle = scaleLabelFont.color;
|
||||
ctx.fillStyle = scaleLabel.color;
|
||||
ctx.font = scaleLabelFont.string;
|
||||
ctx.fillText(scaleLabel.labelString, 0, 0);
|
||||
ctx.restore();
|
||||
|
||||
@ -94,10 +94,13 @@ function registerDefaults(item, scope, parentScope) {
|
||||
|
||||
function routeDefaults(scope, routes) {
|
||||
Object.keys(routes).forEach(property => {
|
||||
const propertyParts = property.split('.');
|
||||
const sourceName = propertyParts.pop();
|
||||
const sourceScope = [scope].concat(propertyParts).join('.');
|
||||
const parts = routes[property].split('.');
|
||||
const targetName = parts.pop();
|
||||
const targetScope = parts.join('.');
|
||||
defaults.route(scope, property, targetScope, targetName);
|
||||
defaults.route(sourceScope, sourceName, targetScope, targetName);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -221,5 +221,5 @@ ArcElement.defaults = {
|
||||
* @type {any}
|
||||
*/
|
||||
ArcElement.defaultRoutes = {
|
||||
backgroundColor: 'color'
|
||||
backgroundColor: 'backgroundColor'
|
||||
};
|
||||
|
||||
@ -263,6 +263,6 @@ BarElement.defaults = {
|
||||
* @type {any}
|
||||
*/
|
||||
BarElement.defaultRoutes = {
|
||||
backgroundColor: 'color',
|
||||
borderColor: 'color'
|
||||
backgroundColor: 'backgroundColor',
|
||||
borderColor: 'borderColor'
|
||||
};
|
||||
|
||||
@ -390,6 +390,6 @@ LineElement.defaults = {
|
||||
* @type {any}
|
||||
*/
|
||||
LineElement.defaultRoutes = {
|
||||
backgroundColor: 'color',
|
||||
borderColor: 'color'
|
||||
backgroundColor: 'backgroundColor',
|
||||
borderColor: 'borderColor'
|
||||
};
|
||||
|
||||
@ -84,6 +84,6 @@ PointElement.defaults = {
|
||||
* @type {any}
|
||||
*/
|
||||
PointElement.defaultRoutes = {
|
||||
backgroundColor: 'color',
|
||||
borderColor: 'color'
|
||||
backgroundColor: 'backgroundColor',
|
||||
borderColor: 'borderColor'
|
||||
};
|
||||
|
||||
@ -125,14 +125,11 @@ export function toFont(options, fallback) {
|
||||
}
|
||||
|
||||
const font = {
|
||||
color: valueOrDefault(options.color, fallback.color),
|
||||
family: valueOrDefault(options.family, fallback.family),
|
||||
lineHeight: toLineHeight(valueOrDefault(options.lineHeight, fallback.lineHeight), size),
|
||||
lineWidth: valueOrDefault(options.lineWidth, fallback.lineWidth),
|
||||
size,
|
||||
style: valueOrDefault(options.style, fallback.style),
|
||||
weight: valueOrDefault(options.weight, fallback.weight),
|
||||
strokeStyle: valueOrDefault(options.strokeStyle, fallback.strokeStyle),
|
||||
string: ''
|
||||
};
|
||||
|
||||
|
||||
@ -311,7 +311,7 @@ export class Legend extends Element {
|
||||
const rtlHelper = getRtlAdapter(opts.rtl, me.left, me._minSize.width);
|
||||
const ctx = me.ctx;
|
||||
const labelFont = toFont(labelOpts.font, me.chart.options.font);
|
||||
const fontColor = labelFont.color;
|
||||
const fontColor = labelOpts.color;
|
||||
const fontSize = labelFont.size;
|
||||
let cursor;
|
||||
|
||||
@ -542,8 +542,8 @@ export class Legend extends Element {
|
||||
// Canvas setup
|
||||
ctx.textAlign = rtlHelper.textAlign(textAlign);
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.strokeStyle = titleFont.color;
|
||||
ctx.fillStyle = titleFont.color;
|
||||
ctx.strokeStyle = titleOpts.color;
|
||||
ctx.fillStyle = titleOpts.color;
|
||||
ctx.font = titleFont.string;
|
||||
|
||||
ctx.fillText(titleOpts.text, x, y);
|
||||
|
||||
@ -182,7 +182,7 @@ export class Title extends Element {
|
||||
|
||||
ctx.save();
|
||||
|
||||
ctx.fillStyle = fontOpts.color;
|
||||
ctx.fillStyle = opts.color;
|
||||
ctx.font = fontOpts.string;
|
||||
|
||||
ctx.translate(titleX, titleY);
|
||||
@ -267,5 +267,9 @@ export default {
|
||||
position: 'top',
|
||||
text: '',
|
||||
weight: 2000 // by default greater than legend (1000) to be above
|
||||
},
|
||||
|
||||
defaultRoutes: {
|
||||
color: 'color'
|
||||
}
|
||||
};
|
||||
|
||||
@ -653,7 +653,7 @@ export class Tooltip extends Element {
|
||||
titleFont = options.titleFont;
|
||||
titleSpacing = options.titleSpacing;
|
||||
|
||||
ctx.fillStyle = options.titleFont.color;
|
||||
ctx.fillStyle = options.titleColor;
|
||||
ctx.font = titleFont.string;
|
||||
|
||||
for (i = 0; i < length; ++i) {
|
||||
@ -745,7 +745,7 @@ export class Tooltip extends Element {
|
||||
pt.x = getAlignedX(me, bodyAlignForCalculation);
|
||||
|
||||
// Before body lines
|
||||
ctx.fillStyle = bodyFont.color;
|
||||
ctx.fillStyle = options.bodyColor;
|
||||
each(me.beforeBody, fillLineOfText);
|
||||
|
||||
xLinePadding = displayColors && bodyAlignForCalculation !== 'right'
|
||||
@ -803,7 +803,7 @@ export class Tooltip extends Element {
|
||||
|
||||
footerFont = options.footerFont;
|
||||
|
||||
ctx.fillStyle = options.footerFont.color;
|
||||
ctx.fillStyle = options.footerColor;
|
||||
ctx.font = footerFont.string;
|
||||
|
||||
for (i = 0; i < length; ++i) {
|
||||
@ -1098,22 +1098,22 @@ export default {
|
||||
custom: null,
|
||||
position: 'average',
|
||||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||
titleColor: '#fff',
|
||||
titleFont: {
|
||||
style: 'bold',
|
||||
color: '#fff',
|
||||
},
|
||||
titleSpacing: 2,
|
||||
titleMarginBottom: 6,
|
||||
titleAlign: 'left',
|
||||
bodyColor: '#fff',
|
||||
bodySpacing: 2,
|
||||
bodyFont: {
|
||||
color: '#fff',
|
||||
},
|
||||
bodyAlign: 'left',
|
||||
footerColor: '#fff',
|
||||
footerSpacing: 2,
|
||||
footerMarginTop: 6,
|
||||
footerFont: {
|
||||
color: '#fff',
|
||||
style: 'bold',
|
||||
},
|
||||
footerAlign: 'left',
|
||||
@ -1190,7 +1190,7 @@ export default {
|
||||
};
|
||||
},
|
||||
labelTextColor() {
|
||||
return this.options.bodyFont.color;
|
||||
return this.options.bodyColor;
|
||||
},
|
||||
labelPointStyle(tooltipItem) {
|
||||
const meta = tooltipItem.chart.getDatasetMeta(tooltipItem.datasetIndex);
|
||||
|
||||
@ -183,7 +183,7 @@ function drawPointLabels(scale) {
|
||||
const context = scale.getContext(i);
|
||||
const plFont = toFont(resolve([pointLabelOpts.font], context, i), scale.chart.options.font);
|
||||
ctx.font = plFont.string;
|
||||
ctx.fillStyle = plFont.color;
|
||||
ctx.fillStyle = pointLabelOpts.color;
|
||||
|
||||
const angle = toDegrees(scale.getIndexAngle(i));
|
||||
ctx.textAlign = getTextAlignForAngle(angle);
|
||||
@ -499,7 +499,7 @@ export default class RadialLinearScale extends LinearScaleBase {
|
||||
);
|
||||
}
|
||||
|
||||
ctx.fillStyle = tickFont.color;
|
||||
ctx.fillStyle = tickOpts.color;
|
||||
ctx.fillText(tick.label, 0, -offset);
|
||||
});
|
||||
|
||||
@ -526,7 +526,6 @@ RadialLinearScale.defaults = {
|
||||
|
||||
angleLines: {
|
||||
display: true,
|
||||
color: 'rgba(0,0,0,0.1)',
|
||||
lineWidth: 1,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0
|
||||
@ -568,3 +567,9 @@ RadialLinearScale.defaults = {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
RadialLinearScale.defaultRoutes = {
|
||||
'angleLines.color': 'borderColor',
|
||||
'pointLabels.color': 'color',
|
||||
'ticks.color': 'color'
|
||||
};
|
||||
|
||||
@ -141,8 +141,8 @@ describe('Chart.controllers.bubble', function() {
|
||||
expect(meta.data[i].x).toBeCloseToPixel(expected.x);
|
||||
expect(meta.data[i].y).toBeCloseToPixel(expected.y);
|
||||
expect(meta.data[i].options).toEqual(jasmine.objectContaining({
|
||||
backgroundColor: Chart.defaults.color,
|
||||
borderColor: Chart.defaults.color,
|
||||
backgroundColor: Chart.defaults.backgroundColor,
|
||||
borderColor: Chart.defaults.borderColor,
|
||||
borderWidth: 1,
|
||||
hitRadius: 1,
|
||||
radius: expected.r
|
||||
|
||||
@ -100,9 +100,9 @@ describe('Chart.controllers.radar', function() {
|
||||
tension: 0.1,
|
||||
},
|
||||
point: {
|
||||
backgroundColor: Chart.defaults.color,
|
||||
backgroundColor: Chart.defaults.backgroundColor,
|
||||
borderWidth: 1,
|
||||
borderColor: Chart.defaults.color,
|
||||
borderColor: Chart.defaults.borderColor,
|
||||
hitRadius: 1,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 1,
|
||||
@ -139,9 +139,9 @@ describe('Chart.controllers.radar', function() {
|
||||
expect(meta.data[i].x).toBeCloseToPixel(expected.x);
|
||||
expect(meta.data[i].y).toBeCloseToPixel(expected.y);
|
||||
expect(meta.data[i].options).toEqual(jasmine.objectContaining({
|
||||
backgroundColor: Chart.defaults.color,
|
||||
backgroundColor: Chart.defaults.backgroundColor,
|
||||
borderWidth: 1,
|
||||
borderColor: Chart.defaults.color,
|
||||
borderColor: Chart.defaults.borderColor,
|
||||
hitRadius: 1,
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
@ -164,9 +164,9 @@ describe('Chart.controllers.radar', function() {
|
||||
expect(meta.data[i].controlPointNextX).toBeCloseToPixel(expected.cpnx);
|
||||
expect(meta.data[i].controlPointNextY).toBeCloseToPixel(expected.cpny);
|
||||
expect(meta.data[i].options).toEqual(jasmine.objectContaining({
|
||||
backgroundColor: Chart.defaults.color,
|
||||
backgroundColor: Chart.defaults.backgroundColor,
|
||||
borderWidth: 1,
|
||||
borderColor: Chart.defaults.color,
|
||||
borderColor: Chart.defaults.borderColor,
|
||||
hitRadius: 1,
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
|
||||
@ -610,8 +610,8 @@ describe('Chart.DatasetController', function() {
|
||||
|
||||
it('should resolve data element options to the default color', function() {
|
||||
var data0 = [0, 1, 2, 3, 4, 5];
|
||||
var oldColor = Chart.defaults.color;
|
||||
Chart.defaults.color = 'red';
|
||||
var oldColor = Chart.defaults.borderColor;
|
||||
Chart.defaults.borderColor = 'red';
|
||||
var chart = acquireChart({
|
||||
type: 'line',
|
||||
data: {
|
||||
@ -626,7 +626,7 @@ describe('Chart.DatasetController', function() {
|
||||
expect(meta.data[0].options.borderColor).toBe('red');
|
||||
|
||||
// Reset old shared state
|
||||
Chart.defaults.color = oldColor;
|
||||
Chart.defaults.borderColor = oldColor;
|
||||
});
|
||||
|
||||
describe('_resolveOptions', function() {
|
||||
|
||||
@ -7,13 +7,9 @@ describe('Core.scale', function() {
|
||||
|
||||
it('should provide default scale label options', function() {
|
||||
expect(Chart.defaults.scale.scaleLabel).toEqual({
|
||||
// display property
|
||||
color: Chart.defaults.color,
|
||||
display: false,
|
||||
|
||||
// actual label
|
||||
labelString: '',
|
||||
|
||||
// top/bottom padding
|
||||
padding: {
|
||||
top: 4,
|
||||
bottom: 4
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const {toLineHeight, toPadding, toFont, resolve, toTRBLCorners} = Chart.helpers; // from '../../src/helpers/helpers.options';
|
||||
const {toLineHeight, toPadding, toFont, resolve, toTRBLCorners} = Chart.helpers;
|
||||
|
||||
describe('Chart.helpers.options', function() {
|
||||
describe('toLineHeight', function() {
|
||||
@ -102,7 +102,6 @@ describe('Chart.helpers.options', function() {
|
||||
const defaultFont = Object.assign({}, Chart.defaults.font);
|
||||
|
||||
Object.assign(Chart.defaults.font, {
|
||||
color: 'bar',
|
||||
family: 'foobar',
|
||||
size: 42,
|
||||
style: 'xxxyyy',
|
||||
@ -110,55 +109,44 @@ describe('Chart.helpers.options', function() {
|
||||
});
|
||||
|
||||
expect(toFont({})).toEqual({
|
||||
color: 'bar',
|
||||
family: 'foobar',
|
||||
lineHeight: 63,
|
||||
size: 42,
|
||||
string: 'xxxyyy 42px foobar',
|
||||
style: 'xxxyyy',
|
||||
weight: null,
|
||||
lineWidth: 0,
|
||||
strokeStyle: undefined
|
||||
weight: null
|
||||
});
|
||||
|
||||
Object.assign(Chart.defaults.font, defaultFont);
|
||||
});
|
||||
it ('should return a font with given values', function() {
|
||||
expect(toFont({
|
||||
color: 'asd',
|
||||
family: 'bla',
|
||||
lineHeight: 8,
|
||||
size: 21,
|
||||
style: 'zzz'
|
||||
})).toEqual({
|
||||
color: 'asd',
|
||||
family: 'bla',
|
||||
lineHeight: 8 * 21,
|
||||
size: 21,
|
||||
string: 'zzz 21px bla',
|
||||
style: 'zzz',
|
||||
weight: null,
|
||||
lineWidth: 0,
|
||||
strokeStyle: undefined
|
||||
weight: null
|
||||
});
|
||||
});
|
||||
it ('should handle a string font size', function() {
|
||||
expect(toFont({
|
||||
color: 'asd',
|
||||
family: 'bla',
|
||||
lineHeight: 8,
|
||||
size: '21',
|
||||
style: 'zzz'
|
||||
})).toEqual({
|
||||
color: 'asd',
|
||||
family: 'bla',
|
||||
lineHeight: 8 * 21,
|
||||
size: 21,
|
||||
string: 'zzz 21px bla',
|
||||
style: 'zzz',
|
||||
weight: null,
|
||||
lineWidth: 0,
|
||||
strokeStyle: undefined
|
||||
weight: null
|
||||
});
|
||||
});
|
||||
it('should return null as a font string if size or family are missing', function() {
|
||||
|
||||
@ -6,6 +6,7 @@ describe('Title block tests', function() {
|
||||
it('Should have the correct default config', function() {
|
||||
expect(Chart.defaults.plugins.title).toEqual({
|
||||
align: 'center',
|
||||
color: Chart.defaults.color,
|
||||
display: false,
|
||||
position: 'top',
|
||||
fullWidth: true,
|
||||
|
||||
@ -75,9 +75,9 @@ describe('Plugin.Tooltip', function() {
|
||||
expect(tooltip.options.yPadding).toEqual(6);
|
||||
expect(tooltip.xAlign).toEqual('left');
|
||||
expect(tooltip.yAlign).toEqual('center');
|
||||
expect(tooltip.options.bodyColor).toEqual('#fff');
|
||||
|
||||
expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: defaults.font.style,
|
||||
size: defaults.font.size,
|
||||
@ -88,8 +88,8 @@ describe('Plugin.Tooltip', function() {
|
||||
bodySpacing: 2,
|
||||
}));
|
||||
|
||||
expect(tooltip.options.titleColor).toEqual('#fff');
|
||||
expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: 'bold',
|
||||
size: defaults.font.size,
|
||||
@ -101,8 +101,8 @@ describe('Plugin.Tooltip', function() {
|
||||
titleMarginBottom: 6,
|
||||
}));
|
||||
|
||||
expect(tooltip.options.footerColor).toEqual('#fff');
|
||||
expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: 'bold',
|
||||
size: defaults.font.size,
|
||||
@ -142,11 +142,11 @@ describe('Plugin.Tooltip', function() {
|
||||
afterBody: [],
|
||||
footer: [],
|
||||
labelColors: [{
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}, {
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}]
|
||||
}));
|
||||
|
||||
@ -241,7 +241,6 @@ describe('Plugin.Tooltip', function() {
|
||||
expect(tooltip.yAlign).toEqual('center');
|
||||
|
||||
expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: defaults.font.style,
|
||||
size: defaults.font.size,
|
||||
@ -253,7 +252,6 @@ describe('Plugin.Tooltip', function() {
|
||||
}));
|
||||
|
||||
expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: 'bold',
|
||||
size: defaults.font.size,
|
||||
@ -266,7 +264,6 @@ describe('Plugin.Tooltip', function() {
|
||||
}));
|
||||
|
||||
expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: 'bold',
|
||||
size: defaults.font.size,
|
||||
@ -301,8 +298,8 @@ describe('Plugin.Tooltip', function() {
|
||||
expect(tooltip.labelTextColors).toEqual(['#fff']);
|
||||
|
||||
expect(tooltip.labelColors).toEqual([{
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}]);
|
||||
|
||||
expect(tooltip.x).toBeCloseToPixel(267);
|
||||
@ -396,7 +393,6 @@ describe('Plugin.Tooltip', function() {
|
||||
expect(tooltip.yAlign).toEqual('center');
|
||||
|
||||
expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: defaults.font.style,
|
||||
size: defaults.font.size,
|
||||
@ -408,7 +404,6 @@ describe('Plugin.Tooltip', function() {
|
||||
}));
|
||||
|
||||
expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: 'bold',
|
||||
size: defaults.font.size,
|
||||
@ -420,7 +415,6 @@ describe('Plugin.Tooltip', function() {
|
||||
}));
|
||||
|
||||
expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: 'bold',
|
||||
size: defaults.font.size,
|
||||
@ -460,11 +454,11 @@ describe('Plugin.Tooltip', function() {
|
||||
footer: ['beforeFooter', 'footer', 'afterFooter'],
|
||||
labelTextColors: ['labelTextColor', 'labelTextColor'],
|
||||
labelColors: [{
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}, {
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}],
|
||||
labelPointStyles: [{
|
||||
pointStyle: 'labelPointStyle',
|
||||
@ -580,11 +574,11 @@ describe('Plugin.Tooltip', function() {
|
||||
afterBody: [],
|
||||
footer: [],
|
||||
labelColors: [{
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}, {
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}]
|
||||
}));
|
||||
|
||||
@ -651,11 +645,11 @@ describe('Plugin.Tooltip', function() {
|
||||
afterBody: [],
|
||||
footer: [],
|
||||
labelColors: [{
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}, {
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}]
|
||||
}));
|
||||
|
||||
@ -723,11 +717,11 @@ describe('Plugin.Tooltip', function() {
|
||||
afterBody: [],
|
||||
footer: [],
|
||||
labelColors: [{
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}, {
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}]
|
||||
}));
|
||||
|
||||
@ -794,8 +788,8 @@ describe('Plugin.Tooltip', function() {
|
||||
afterBody: [],
|
||||
footer: [],
|
||||
labelColors: [{
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}]
|
||||
}));
|
||||
|
||||
@ -1229,7 +1223,6 @@ describe('Plugin.Tooltip', function() {
|
||||
expect(tooltip.yAlign).toEqual('top');
|
||||
|
||||
expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: defaults.font.style,
|
||||
size: defaults.font.size,
|
||||
@ -1241,7 +1234,6 @@ describe('Plugin.Tooltip', function() {
|
||||
}));
|
||||
|
||||
expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: 'bold',
|
||||
size: defaults.font.size,
|
||||
@ -1254,7 +1246,6 @@ describe('Plugin.Tooltip', function() {
|
||||
}));
|
||||
|
||||
expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({
|
||||
color: '#fff',
|
||||
family: defaults.font.family,
|
||||
style: 'bold',
|
||||
size: defaults.font.size,
|
||||
@ -1294,11 +1285,11 @@ describe('Plugin.Tooltip', function() {
|
||||
footer: ['beforeFooter', 'newline', 'footer', 'newline', 'afterFooter', 'newline'],
|
||||
labelTextColors: ['labelTextColor', 'labelTextColor'],
|
||||
labelColors: [{
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}, {
|
||||
borderColor: defaults.color,
|
||||
backgroundColor: defaults.color
|
||||
borderColor: defaults.borderColor,
|
||||
backgroundColor: defaults.backgroundColor
|
||||
}]
|
||||
}));
|
||||
|
||||
|
||||
@ -32,6 +32,7 @@ describe('Test the radial linear scale', function() {
|
||||
},
|
||||
|
||||
ticks: {
|
||||
color: Chart.defaults.color,
|
||||
showLabelBackdrop: true,
|
||||
backdropColor: 'rgba(255,255,255,0.75)',
|
||||
backdropPaddingY: 2,
|
||||
@ -40,6 +41,7 @@ describe('Test the radial linear scale', function() {
|
||||
},
|
||||
|
||||
pointLabels: {
|
||||
color: Chart.defaults.color,
|
||||
display: true,
|
||||
font: {
|
||||
size: 10
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user