ticks.display: 'top'

chartjs · Apr 25, 2019 · f53c872 · f53c872
1 parent 4e349a0
commit f53c872
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 43 deletions.
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
@@ -645,10 +645,15 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
 
 		// Draw all the scales
 		helpers.each(me.boxes, function(box) {
-			box.draw(me.chartArea);
+			box.draw(me.chartArea, false);
 		}, me);
 
 		me.drawDatasets(easingValue);
+
+		helpers.each(me.boxes, function(box) {
+			box.draw(me.chartArea, true);
+		}, me);
+
 		me._drawTooltip(easingValue);
 
 		plugins.notify(me, 'afterDraw', [easingValue]);

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
@@ -726,18 +726,19 @@ module.exports = Element.extend({
 	/**
 	 * Actually draw the scale on the canvas
 	 * @param {object} chartArea - the area of the chart to draw full grid lines on
+	 * @param {boolean} top - drawing on top / after datasets
 	 */
-	draw: function(chartArea) {
+	draw: function(chartArea, top) {
 		var me = this;
 		var options = me.options;
+		var optionTicks = options.ticks;
 
-		if (!me._isVisible()) {
+		if (!me._isVisible() || (top && optionTicks.display !== 'top')) {
 			return;
 		}
 
 		var chart = me.chart;
 		var context = me.ctx;
-		var optionTicks = options.ticks;
 		var gridLines = options.gridLines;
 		var scaleLabel = options.scaleLabel;
 		var position = options.position;
@@ -891,7 +892,7 @@ module.exports = Element.extend({
 			var glWidth = itemToDraw.glWidth;
 			var glColor = itemToDraw.glColor;
 
-			if (gridLines.display && glWidth && glColor) {
+			if (gridLines.display && glWidth && glColor && !top) {
 				context.save();
 				context.lineWidth = glWidth;
 				context.strokeStyle = glColor;
@@ -916,7 +917,7 @@ module.exports = Element.extend({
 				context.restore();
 			}
 
-			if (optionTicks.display) {
+			if (optionTicks.display && (optionTicks.display === 'top') === top) {
 				var tickFont = itemToDraw.major ? tickFonts.major : tickFonts.minor;
 
 				// Make sure we draw text in the correct color and font

diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
@@ -473,60 +473,71 @@ module.exports = LinearScaleBase.extend({
 			0);
 	},
 
-	draw: function() {
+	/**
+	 * Actually draw the scale on the canvas
+	 * @param {object} chartArea - the area of the chart
+	 * @param {boolean} top - drawing on top / after datasets
+	 */
+	draw: function(chartArea, top) {
 		var me = this;
 		var opts = me.options;
 		var gridLineOpts = opts.gridLines;
 		var tickOpts = opts.ticks;
 
-		if (opts.display) {
-			var ctx = me.ctx;
-			var startAngle = this.getIndexAngle(0);
-			var tickFont = helpers.options._parseFont(tickOpts);
+		if (!opts.display || (top && tickOpts.display !== 'top')) {
+			return;
+		}
 
-			if (opts.angleLines.display || opts.pointLabels.display) {
-				drawPointLabels(me);
-			}
+		var ctx = me.ctx;
+		var startAngle = this.getIndexAngle(0);
+		var tickFont = helpers.options._parseFont(tickOpts);
 
-			helpers.each(me.ticks, function(label, index) {
-				// Don't draw a centre value (if it is minimum)
-				if (index > 0 || tickOpts.reverse) {
-					var yCenterOffset = me.getDistanceFromCenterForValue(me.ticksAsNumbers[index]);
+		if (!top && (opts.angleLines.display || opts.pointLabels.display)) {
+			drawPointLabels(me);
+		}
 
-					// Draw circular lines around the scale
-					if (gridLineOpts.display && index !== 0) {
-						drawRadiusLine(me, gridLineOpts, yCenterOffset, index);
-					}
+		helpers.each(me.ticks, function(label, index) {
+			// Don't draw a centre value (if it is minimum)
+			if (index > 0 || tickOpts.reverse) {
+				var yCenterOffset = me.getDistanceFromCenterForValue(me.ticksAsNumbers[index]);
 
-					if (tickOpts.display) {
-						var tickFontColor = valueOrDefault(tickOpts.fontColor, defaults.global.defaultFontColor);
-						ctx.font = tickFont.string;
-
-						ctx.save();
-						ctx.translate(me.xCenter, me.yCenter);
-						ctx.rotate(startAngle);
-
-						if (tickOpts.showLabelBackdrop) {
-							var labelWidth = ctx.measureText(label).width;
-							ctx.fillStyle = tickOpts.backdropColor;
-							ctx.fillRect(
-								-labelWidth / 2 - tickOpts.backdropPaddingX,
-								-yCenterOffset - tickFont.size / 2 - tickOpts.backdropPaddingY,
-								labelWidth + tickOpts.backdropPaddingX * 2,
-								tickFont.size + tickOpts.backdropPaddingY * 2
-							);
-						}
+				// Draw circular lines around the scale
+				if (gridLineOpts.display && index !== 0 && !top) {
+					drawRadiusLine(me, gridLineOpts, yCenterOffset, index);
+				}
 
+				if (tickOpts.display) {
+					var tickFontColor = valueOrDefault(tickOpts.fontColor, defaults.global.defaultFontColor);
+					ctx.font = tickFont.string;
+
+					ctx.save();
+					ctx.translate(me.xCenter, me.yCenter);
+					ctx.rotate(startAngle);
+
+					// Backdrop is drawn behind even if label is drawn on top
+					if (tickOpts.showLabelBackdrop && !top) {
+						var labelWidth = ctx.measureText(label).width;
+						ctx.fillStyle = tickOpts.backdropColor;
+						ctx.fillRect(
+							-labelWidth / 2 - tickOpts.backdropPaddingX,
+							-yCenterOffset - tickFont.size / 2 - tickOpts.backdropPaddingY,
+							labelWidth + tickOpts.backdropPaddingX * 2,
+							tickFont.size + tickOpts.backdropPaddingY * 2
+						);
+					}
+
+					if ((tickOpts.display === 'top') === top) {
 						ctx.textAlign = 'center';
 						ctx.textBaseline = 'middle';
 						ctx.fillStyle = tickFontColor;
 						ctx.fillText(label, 0, -yCenterOffset);
-						ctx.restore();
 					}
+					ctx.restore();
 				}
-			});
-		}
+			}
+		});
 	}
+
 });
 
 // INTERNAL: static default options, registered in src/index.js