diff --git a/docs/01-Scales.md b/docs/01-Scales.md index c35a43451..a1ecc7c24 100644 --- a/docs/01-Scales.md +++ b/docs/01-Scales.md @@ -211,7 +211,7 @@ The radial linear scale extends the core scale class with the following tick tem position: "chartArea", angleLines: { - show: true, + display: true, color: "rgba(0, 0, 0, 0.1)", lineWidth: 1 }, diff --git a/docs/02-Line-Chart.md b/docs/02-Line-Chart.md index 04e14ea84..590ec2355 100644 --- a/docs/02-Line-Chart.md +++ b/docs/02-Line-Chart.md @@ -140,7 +140,7 @@ new Chart(ctx, { data: data, options: { xAxes: [{ - show: false + display: false }] } }); diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 8f89dfca6..91400b701 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -10,7 +10,7 @@ // grid line settings gridLines: { - show: true, + display: true, color: "rgba(0, 0, 0, 0.1)", lineWidth: 1, drawOnChartArea: true, @@ -31,7 +31,7 @@ labelString: '', // display property - show: false, + display: false, }, // label settings @@ -46,7 +46,7 @@ mirror: false, padding: 10, reverse: false, - show: true, + display: true, callback: function(value) { return '' + value; }, @@ -231,18 +231,18 @@ if (this.isHorizontal()) { this.minSize.width = this.maxWidth; // fill all the width } else { - this.minSize.width = this.options.gridLines.show && this.options.display ? 10 : 0; + this.minSize.width = this.options.gridLines.display && this.options.display ? 10 : 0; } // height if (this.isHorizontal()) { - this.minSize.height = this.options.gridLines.show && this.options.display ? 10 : 0; + this.minSize.height = this.options.gridLines.display && this.options.display ? 10 : 0; } else { this.minSize.height = this.maxHeight; // fill all the height } // Are we showing a title for the scale? - if (this.options.scaleLabel.show) { + if (this.options.scaleLabel.display) { if (this.isHorizontal()) { this.minSize.height += (this.options.scaleLabel.fontSize * 1.5); } else { @@ -250,7 +250,7 @@ } } - if (this.options.ticks.show && this.options.display) { + if (this.options.ticks.display && this.options.display) { // Don't bother fitting the ticks if we are not showing them var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily); @@ -411,7 +411,7 @@ var xLineValue = this.getPixelForTick(index); // xvalues for grid lines var xLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option) - if (this.options.gridLines.show) { + if (this.options.gridLines.display) { if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) { // Draw the first index specially this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; @@ -443,7 +443,7 @@ this.ctx.stroke(); } - if (this.options.ticks.show) { + if (this.options.ticks.display) { this.ctx.save(); this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - 10 : this.top + 10); this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); @@ -455,7 +455,7 @@ } }, this); - if (this.options.scaleLabel.show) { + if (this.options.scaleLabel.display) { // Draw the scale label this.ctx.textAlign = "center"; this.ctx.textBaseline = 'middle'; @@ -481,7 +481,7 @@ var yLineValue = this.getPixelForTick(index); // xvalues for grid lines - if (this.options.gridLines.show) { + if (this.options.gridLines.display) { if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) { // Draw the first index specially this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; @@ -513,7 +513,7 @@ this.ctx.stroke(); } - if (this.options.ticks.show) { + if (this.options.ticks.display) { var xLabelValue; var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option) @@ -548,7 +548,7 @@ } }, this); - if (this.options.scaleLabel.show) { + if (this.options.scaleLabel.display) { // Draw the scale label scaleLabelX = this.options.position == 'left' ? this.left + (this.options.scaleLabel.fontSize / 2) : this.right - (this.options.scaleLabel.fontSize / 2); scaleLabelY = this.top + ((this.bottom - this.top) / 2); diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 2ce84a91d..164a0a8bb 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -392,8 +392,11 @@ // Draw Background + // IE11/Edge does not like very small opacities, so snap to 0 + var opacity = Math.abs(vm.opacity < 1e-3) ? 0 : vm.opacity; + if (this._options.tooltips.enabled) { - ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(vm.opacity).rgbString(); + ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(opacity).rgbString(); helpers.drawRoundedRectangle(ctx, tooltipX, tooltipY, tooltipWidth, tooltipHeight, vm.cornerRadius); ctx.fill(); } @@ -401,7 +404,7 @@ // Draw Caret if (this._options.tooltips.enabled) { - ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(vm.opacity).rgbString(); + ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(opacity).rgbString(); if (vm.xAlign == 'left') { @@ -433,7 +436,7 @@ if (vm.title.length) { ctx.textAlign = vm._titleAlign; ctx.textBaseline = "top"; - ctx.fillStyle = helpers.color(vm.titleColor).alpha(vm.opacity).rgbString(); + ctx.fillStyle = helpers.color(vm.titleColor).alpha(opacity).rgbString(); ctx.font = helpers.fontString(vm.titleFontSize, vm._titleFontStyle, vm._titleFontFamily); helpers.each(vm.title, function(title, i) { @@ -449,7 +452,7 @@ // Body ctx.textAlign = vm._bodyAlign; ctx.textBaseline = "top"; - ctx.fillStyle = helpers.color(vm.bodyColor).alpha(vm.opacity).rgbString(); + ctx.fillStyle = helpers.color(vm.bodyColor).alpha(opacity).rgbString(); ctx.font = helpers.fontString(vm.bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily); // Before Body @@ -464,18 +467,18 @@ // Draw Legend-like boxes if needed if (this._options.tooltips.mode != 'single') { // Fill a white rect so that colours merge nicely if the opacity is < 1 - ctx.fillStyle = helpers.color('#FFFFFF').alpha(vm.opacity).rgbaString(); + ctx.fillStyle = helpers.color('#FFFFFF').alpha(opacity).rgbaString(); ctx.fillRect(xBase, yBase, vm.bodyFontSize, vm.bodyFontSize); // Border - ctx.strokeStyle = helpers.color(vm.labelColors[i].borderColor).alpha(vm.opacity).rgbaString(); + ctx.strokeStyle = helpers.color(vm.labelColors[i].borderColor).alpha(opacity).rgbaString(); ctx.strokeRect(xBase, yBase, vm.bodyFontSize, vm.bodyFontSize); // Inner square - ctx.fillStyle = helpers.color(vm.labelColors[i].backgroundColor).alpha(vm.opacity).rgbaString(); + ctx.fillStyle = helpers.color(vm.labelColors[i].backgroundColor).alpha(opacity).rgbaString(); ctx.fillRect(xBase + 1, yBase + 1, vm.bodyFontSize - 2, vm.bodyFontSize - 2); - ctx.fillStyle = helpers.color(vm.bodyColor).alpha(vm.opacity).rgbaString(); // Return fill style for text + ctx.fillStyle = helpers.color(vm.bodyColor).alpha(opacity).rgbaString(); // Return fill style for text } // Body Line @@ -501,7 +504,7 @@ ctx.textAlign = vm._footerAlign; ctx.textBaseline = "top"; - ctx.fillStyle = helpers.color(vm.footerColor).alpha(vm.opacity).rgbString(); + ctx.fillStyle = helpers.color(vm.footerColor).alpha(opacity).rgbString(); ctx.font = helpers.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily); helpers.each(vm.footer, function(footer, i) { diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index c436ff805..d9f327cf5 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -14,7 +14,7 @@ position: "chartArea", angleLines: { - show: true, + display: true, color: "rgba(0, 0, 0, 0.1)", lineWidth: 1 }, @@ -304,7 +304,7 @@ var yHeight = this.yCenter - yCenterOffset; // Draw circular lines around the scale - if (this.options.gridLines.show) { + if (this.options.gridLines.display) { ctx.strokeStyle = this.options.gridLines.color; ctx.lineWidth = this.options.gridLines.lineWidth; @@ -330,7 +330,7 @@ } } - if (this.options.ticks.show) { + if (this.options.ticks.display) { ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily); if (this.options.ticks.showLabelBackdrop) { @@ -357,7 +357,7 @@ ctx.strokeStyle = this.options.angleLines.color; for (var i = this.getValueCount() - 1; i >= 0; i--) { - if (this.options.angleLines.show) { + if (this.options.angleLines.display) { var outerPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max)); ctx.beginPath(); ctx.moveTo(this.xCenter, this.yCenter); diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js index 7a512da44..35777cffc 100644 --- a/test/core.helpers.tests.js +++ b/test/core.helpers.tests.js @@ -219,7 +219,7 @@ describe('Core helper tests', function() { drawTicks: true, // draw ticks extending towards the label lineWidth: 1, offsetGridLines: false, - show: true, + display: true, zeroLineColor: "rgba(0,0,0,0.25)", zeroLineWidth: 1, }, @@ -230,7 +230,7 @@ describe('Core helper tests', function() { fontSize: 12, fontStyle: 'normal', labelString: '', - show: false, + display: false, }, ticks: { beginAtZero: false, @@ -243,7 +243,7 @@ describe('Core helper tests', function() { mirror: false, padding: 10, reverse: false, - show: true, + display: true, callback: merged.scales.yAxes[1].ticks.callback, // make it nicer, then check explicitly below }, type: 'linear' @@ -256,7 +256,7 @@ describe('Core helper tests', function() { drawTicks: true, // draw ticks extending towards the label lineWidth: 1, offsetGridLines: false, - show: true, + display: true, zeroLineColor: "rgba(0,0,0,0.25)", zeroLineWidth: 1, }, @@ -267,7 +267,7 @@ describe('Core helper tests', function() { fontSize: 12, fontStyle: 'normal', labelString: '', - show: false, + display: false, }, ticks: { beginAtZero: false, @@ -280,7 +280,7 @@ describe('Core helper tests', function() { mirror: false, padding: 10, reverse: false, - show: true, + display: true, callback: merged.scales.yAxes[2].ticks.callback, // make it nicer, then check explicitly below }, type: 'linear' diff --git a/test/scale.category.tests.js b/test/scale.category.tests.js index fc1f8693e..f16af1559 100644 --- a/test/scale.category.tests.js +++ b/test/scale.category.tests.js @@ -18,7 +18,7 @@ describe('Category scale tests', function() { drawTicks: true, // draw ticks extending towards the label lineWidth: 1, offsetGridLines: false, - show: true, + display: true, zeroLineColor: "rgba(0,0,0,0.25)", zeroLineWidth: 1, }, @@ -29,7 +29,7 @@ describe('Category scale tests', function() { fontSize: 12, fontStyle: 'normal', labelString: '', - show: false, + display: false, }, ticks: { beginAtZero: false, @@ -42,7 +42,7 @@ describe('Category scale tests', function() { mirror: false, padding: 10, reverse: false, - show: true, + display: true, callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below } }); diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js index bace791b8..b3630c10e 100644 --- a/test/scale.linear.tests.js +++ b/test/scale.linear.tests.js @@ -17,7 +17,7 @@ describe('Linear Scale', function() { drawTicks: true, // draw ticks extending towards the label lineWidth: 1, offsetGridLines: false, - show: true, + display: true, zeroLineColor: "rgba(0,0,0,0.25)", zeroLineWidth: 1, }, @@ -28,7 +28,7 @@ describe('Linear Scale', function() { fontSize: 12, fontStyle: 'normal', labelString: '', - show: false, + display: false, }, ticks: { beginAtZero: false, @@ -41,7 +41,7 @@ describe('Linear Scale', function() { mirror: false, padding: 10, reverse: false, - show: true, + display: true, callback: defaultConfig.ticks.callback, // make this work nicer, then check below } }); @@ -692,7 +692,7 @@ describe('Linear Scale', function() { expect(verticalScale.paddingRight).toBe(0); // Extra size when scale label showing - config.scaleLabel.show = true; + config.scaleLabel.display = true; minSize = verticalScale.update(100, 300); expect(minSize).toEqual({ width: 58, @@ -754,7 +754,7 @@ describe('Linear Scale', function() { expect(horizontalScale.paddingRight).toBe(2); // Extra size when scale label showing - config.scaleLabel.show = true; + config.scaleLabel.display = true; minSize = horizontalScale.update(200, 300); expect(minSize).toEqual({ width: 200, @@ -934,8 +934,8 @@ describe('Linear Scale', function() { // Turn off some drawing config.gridLines.drawTicks = false; config.gridLines.drawOnChartArea = false; - config.ticks.show = false; - config.scaleLabel.show = true; + config.ticks.display = false; + config.scaleLabel.display = true; config.scaleLabel.labelString = 'myLabel'; mockContext.resetCalls(); @@ -1435,8 +1435,8 @@ describe('Linear Scale', function() { // Turn off some drawing config.gridLines.drawTicks = false; config.gridLines.drawOnChartArea = false; - config.ticks.show = false; - config.scaleLabel.show = true; + config.ticks.display = false; + config.scaleLabel.display = true; mockContext.resetCalls(); diff --git a/test/scale.logarithmic.tests.js b/test/scale.logarithmic.tests.js index aa8e31283..9185e87f2 100644 --- a/test/scale.logarithmic.tests.js +++ b/test/scale.logarithmic.tests.js @@ -16,7 +16,7 @@ describe('Logarithmic Scale tests', function() { drawTicks: true, lineWidth: 1, offsetGridLines: false, - show: true, + display: true, zeroLineColor: "rgba(0,0,0,0.25)", zeroLineWidth: 1, }, @@ -27,7 +27,7 @@ describe('Logarithmic Scale tests', function() { fontSize: 12, fontStyle: 'normal', labelString: '', - show: false, + display: false, }, ticks: { beginAtZero: false, @@ -40,7 +40,7 @@ describe('Logarithmic Scale tests', function() { mirror: false, padding: 10, reverse: false, - show: true, + display: true, callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below }, }); diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js index 962eb71b8..eabcbde16 100644 --- a/test/scale.radialLinear.tests.js +++ b/test/scale.radialLinear.tests.js @@ -10,7 +10,7 @@ describe('Test the radial linear scale', function() { var defaultConfig = Chart.scaleService.getScaleDefaults('radialLinear'); expect(defaultConfig).toEqual({ angleLines: { - show: true, + display: true, color: "rgba(0, 0, 0, 0.1)", lineWidth: 1 }, @@ -22,7 +22,7 @@ describe('Test the radial linear scale', function() { drawTicks: true, lineWidth: 1, offsetGridLines: false, - show: true, + display: true, zeroLineColor: "rgba(0,0,0,0.25)", zeroLineWidth: 1, }, @@ -40,7 +40,7 @@ describe('Test the radial linear scale', function() { fontSize: 12, fontStyle: 'normal', labelString: '', - show: false, + display: false, }, ticks: { backdropColor: "rgba(255,255,255,0.75)", @@ -57,7 +57,7 @@ describe('Test the radial linear scale', function() { padding: 10, reverse: false, showLabelBackdrop: true, - show: true, + display: true, callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below }, diff --git a/test/scale.time.tests.js b/test/scale.time.tests.js index 4bb788f1b..4f5c785e9 100644 --- a/test/scale.time.tests.js +++ b/test/scale.time.tests.js @@ -21,7 +21,7 @@ describe('Time scale tests', function() { drawTicks: true, lineWidth: 1, offsetGridLines: false, - show: true, + display: true, zeroLineColor: "rgba(0,0,0,0.25)", zeroLineWidth: 1, }, @@ -32,7 +32,7 @@ describe('Time scale tests', function() { fontSize: 12, fontStyle: 'normal', labelString: '', - show: false, + display: false, }, ticks: { beginAtZero: false, @@ -45,7 +45,7 @@ describe('Time scale tests', function() { mirror: false, padding: 10, reverse: false, - show: true, + display: true, callback: defaultConfig.ticks.callback, // make this nicer, then check explicitly below }, time: {