Use the correct font for the ticks. Ensure that scale labels fill in the correct...

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 3fa0e15b230bea5bd424cb05e70bd870fe96ca9a..23b5a9b70d2cdc659f9e89a4bdf48d61c0e008ec 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -359,8 +359,9 @@
                                var scaleLabelX;
                                var scaleLabelY;
 
-                               // Make sure we draw text in the correct color
+                               // Make sure we draw text in the correct color and font
                                this.ctx.fillStyle = this.options.ticks.fontColor;
+                               var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
 
                                if (this.isHorizontal()) {
                                        setContextLineSettings = true;
@@ -416,7 +417,7 @@
                                                        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);
-                                                       this.ctx.font = this.font;
+                                                       this.ctx.font = labelFont;
                                                        this.ctx.textAlign = (isRotated) ? "right" : "center";
                                                        this.ctx.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top";
                                                        this.ctx.fillText(label, 0, 0);
@@ -428,6 +429,7 @@
                                                // Draw the scale label
                                                this.ctx.textAlign = "center";
                                                this.ctx.textBaseline = 'middle';
+                                               this.ctx.fillStyle = this.options.scaleLabel.fontColor; // render in correct colour
                                                this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily);
 
                                                scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width
@@ -504,7 +506,7 @@
                                                        
                                                        this.ctx.translate(xLabelValue, yLabelValue);
                                                        this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
-                                                       this.ctx.font = this.font;
+                                                       this.ctx.font = labelFont;
                                                        this.ctx.textBaseline = "middle";
                                                        this.ctx.fillText(label, 0, 0);
                                                        this.ctx.restore();
@@ -521,6 +523,7 @@
                                                this.ctx.translate(scaleLabelX, scaleLabelY);
                                                this.ctx.rotate(rotation);
                                                this.ctx.textAlign = "center";
+                                               this.ctx.fillStyle = this.options.scaleLabel.fontColor; // render in correct colour
                                                this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily);
                                                this.ctx.textBaseline = 'middle';
                                                this.ctx.fillText(this.options.scaleLabel.labelString, 0, 0);