Reverse scale on radar / polar area

samples/polar-area.html

@@ -58,7 +58,11 @@ <h3>Legend</h3>
             ]
         },
         options: {
-            responsive: true
+            responsive: true,
+            scale: {
+                beginAtZero: true,
+                reverse: false
+            }
         }
     };
 

samples/radar.html

@@ -50,6 +50,12 @@ <h3>Legend</h3>
                 pointHighlightStroke: "rgba(151,187,205,1)",
                 data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
             }]
+        },
+        options: {
+            scale: {
+                beginAtZero: true,
+                reverse: false
+            }
         }
     };
 

samples/scatter-multi-axis.html

@@ -111,6 +111,7 @@
 		                type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
 		                display: true,
 		                position: "right",
+		                reverse: true,
 		                id: "y-axis-2",
 
 		                // grid line settings

src/scales/scale.radialLinear.js

@@ -27,6 +27,7 @@
 		},
 
 		// scale numbers
+		reverse: false,
 		beginAtZero: true,
 
 		// label settings
@@ -94,6 +95,8 @@
 
 			helpers.each(this.data.datasets, function(dataset) {
 				helpers.each(dataset.data, function(value, index) {
+					if (value === null) return;
+
 					if (this.min === null) {
 						this.min = value;
 					} else if (value < this.min) {
@@ -327,9 +330,14 @@
 			return index * angleMultiplier - (Math.PI / 2);
 		},
 		getDistanceFromCenterForValue: function(value) {
+			if (value === null) return 0; // null always in center
 			// Take into account half font size + the yPadding of the top value
 			var scalingFactor = this.drawingArea / (this.max - this.min);
-			return (value - this.min) * scalingFactor;
+			if (this.options.reverse) {
+				return (this.max - value) * scalingFactor;
+			} else {
+				return (value - this.min) * scalingFactor;
+			}
 		},
 		getPointPosition: function(index, distanceFromCenter) {
 			var thisAngle = this.getIndexAngle(index);
@@ -345,8 +353,8 @@
 			if (this.options.display) {
 				var ctx = this.ctx;
 				helpers.each(this.yLabels, function(label, index) {
-					// Don't draw a centre value
-					if (index > 0) {
+					// Don't draw a centre value (if it is minimum)
+					if (index > 0 || this.options.reverse) {
 						var yCenterOffset = this.getDistanceFromCenterForValue(this.ticks[index]);
 						var yHeight = this.yCenter - yCenterOffset;
 
@@ -405,15 +413,15 @@
 
 					for (var i = this.getValueCount() - 1; i >= 0; i--) {
 						if (this.options.angleLines.show) {
-							var outerPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.max));
+							var outerPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max));
 							ctx.beginPath();
 							ctx.moveTo(this.xCenter, this.yCenter);
 							ctx.lineTo(outerPosition.x, outerPosition.y);
 							ctx.stroke();
 							ctx.closePath();
 						}
 						// Extra 3px out for some label spacing
-						var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.max) + 5);
+						var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5);
 						ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily);
 						ctx.fillStyle = this.options.pointLabels.fontColor;