radialLinear: fix positioning & scaling (#10021)

* radialLinear: fix positioning & scaling

* bloody pixels

* better radar fixtures

src/scales/scale.radialLinear.js

@@ -1,6 +1,6 @@
 import defaults from '../core/core.defaults';
 import {_longestText, renderText} from '../helpers/helpers.canvas';
-import {HALF_PI, isNumber, TAU, toDegrees, toRadians, _normalizeAngle, PI} from '../helpers/helpers.math';
+import {HALF_PI, TAU, toDegrees, toRadians, _normalizeAngle, PI} from '../helpers/helpers.math';
 import LinearScaleBase from './scale.linearbase';
 import Ticks from '../core/core.ticks';
 import {valueOrDefault, isArray, isFinite, callback as callCallback, isNullOrUndef} from '../helpers/helpers.core';
@@ -76,70 +76,77 @@ function fitWithPointLabels(scale) {
 
   // Get maximum radius of the polygon. Either half the height (minus the text width) or half the width.
   // Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points
-  const furthestLimits = {
-    l: 0,
-    r: scale.width,
-    t: 0,
-    b: scale.height - scale.paddingTop
+  const orig = {
+    l: scale.left + scale._padding.left,
+    r: scale.right - scale._padding.right,
+    t: scale.top + scale._padding.top,
+    b: scale.bottom - scale._padding.bottom
   };
-  const furthestAngles = {};
+  const limits = Object.assign({}, orig);
   const labelSizes = [];
   const padding = [];
-
   const valueCount = scale._pointLabels.length;
+  const pointLabelOpts = scale.options.pointLabels;
+  const additionalAngle = pointLabelOpts.centerPointLabels ? PI / valueCount : 0;
+
   for (let i = 0; i < valueCount; i++) {
-    const opts = scale.options.pointLabels.setContext(scale.getPointLabelContext(i));
+    const opts = pointLabelOpts.setContext(scale.getPointLabelContext(i));
     padding[i] = opts.padding;
-    const pointPosition = scale.getPointPosition(i, scale.drawingArea + padding[i]);
+    const pointPosition = scale.getPointPosition(i, scale.drawingArea + padding[i], additionalAngle);
     const plFont = toFont(opts.font);
     const textSize = measureLabelSize(scale.ctx, plFont, scale._pointLabels[i]);
     labelSizes[i] = textSize;
 
-    const angleRadians = scale.getIndexAngle(i);
-    const angle = toDegrees(angleRadians);
+    const angleRadians = _normalizeAngle(scale.getIndexAngle(i) + additionalAngle);
+    const angle = Math.round(toDegrees(angleRadians));
     const hLimits = determineLimits(angle, pointPosition.x, textSize.w, 0, 180);
     const vLimits = determineLimits(angle, pointPosition.y, textSize.h, 90, 270);
-
-    if (hLimits.start < furthestLimits.l) {
-      furthestLimits.l = hLimits.start;
-      furthestAngles.l = angleRadians;
-    }
-
-    if (hLimits.end > furthestLimits.r) {
-      furthestLimits.r = hLimits.end;
-      furthestAngles.r = angleRadians;
-    }
-
-    if (vLimits.start < furthestLimits.t) {
-      furthestLimits.t = vLimits.start;
-      furthestAngles.t = angleRadians;
-    }
-
-    if (vLimits.end > furthestLimits.b) {
-      furthestLimits.b = vLimits.end;
-      furthestAngles.b = angleRadians;
-    }
+    updateLimits(limits, orig, angleRadians, hLimits, vLimits);
   }
 
-  scale._setReductions(scale.drawingArea, furthestLimits, furthestAngles);
+  scale.setCenterPoint(
+    orig.l - limits.l,
+    limits.r - orig.r,
+    orig.t - limits.t,
+    limits.b - orig.b
+  );
 
   // Now that text size is determined, compute the full positions
   scale._pointLabelItems = buildPointLabelItems(scale, labelSizes, padding);
 }
 
+function updateLimits(limits, orig, angle, hLimits, vLimits) {
+  const sin = Math.abs(Math.sin(angle));
+  const cos = Math.abs(Math.cos(angle));
+  let x = 0;
+  let y = 0;
+  if (hLimits.start < orig.l) {
+    x = (orig.l - hLimits.start) / sin;
+    limits.l = Math.min(limits.l, orig.l - x);
+  } else if (hLimits.end > orig.r) {
+    x = (hLimits.end - orig.r) / sin;
+    limits.r = Math.max(limits.r, orig.r + x);
+  }
+  if (vLimits.start < orig.t) {
+    y = (orig.t - vLimits.start) / cos;
+    limits.t = Math.min(limits.t, orig.t - y);
+  } else if (vLimits.end > orig.b) {
+    y = (vLimits.end - orig.b) / cos;
+    limits.b = Math.max(limits.b, orig.b + y);
+  }
+}
+
 function buildPointLabelItems(scale, labelSizes, padding) {
   const items = [];
   const valueCount = scale._pointLabels.length;
   const opts = scale.options;
-  const tickBackdropHeight = getTickBackdropHeight(opts);
-  const outerDistance = scale.getDistanceFromCenterForValue(opts.ticks.reverse ? scale.min : scale.max);
+  const extra = getTickBackdropHeight(opts) / 2;
+  const outerDistance = scale.drawingArea;
   const additionalAngle = opts.pointLabels.centerPointLabels ? PI / valueCount : 0;
 
   for (let i = 0; i < valueCount; i++) {
-    // Extra pixels out for some label spacing
-    const extra = (i === 0 ? tickBackdropHeight / 2 : 0);
     const pointLabelPosition = scale.getPointPosition(i, outerDistance + extra + padding[i], additionalAngle);
-    const angle = toDegrees(pointLabelPosition.angle + HALF_PI);
+    const angle = Math.round(toDegrees(_normalizeAngle(pointLabelPosition.angle + HALF_PI)));
     const size = labelSizes[i];
     const y = yForAngle(pointLabelPosition.y, size.h, angle);
     const textAlign = getTextAlignForAngle(angle);
@@ -261,10 +268,6 @@ function drawRadiusLine(scale, gridLineOpts, radius, labelCount) {
   ctx.restore();
 }
 
-function numberOrZero(param) {
-  return isNumber(param) ? param : 0;
-}
-
 function createPointLabelContext(parent, index, label) {
   return createContext(parent, {
     label,
@@ -291,12 +294,12 @@ export default class RadialLinearScale extends LinearScaleBase {
 
   setDimensions() {
     // Set the unconstrained dimension before label rotation
-    this.width = this.maxWidth;
-    this.height = this.maxHeight;
-    this.paddingTop = getTickBackdropHeight(this.options) / 2;
-    this.xCenter = Math.floor(this.width / 2);
-    this.yCenter = Math.floor((this.height - this.paddingTop) / 2);
-    this.drawingArea = Math.min(this.height - this.paddingTop, this.width) / 2;
+    const padding = this._padding = toPadding(getTickBackdropHeight(this.options) / 2);
+    const w = this.width = this.maxWidth - padding.width;
+    const h = this.height = this.maxHeight - padding.height;
+    this.xCenter = Math.floor(this.left + w / 2 + padding.left);
+    this.yCenter = Math.floor(this.top + h / 2 + padding.top);
+    this.drawingArea = Math.floor(Math.min(w, h) / 2);
   }
 
   determineDataLimits() {
@@ -339,35 +342,10 @@ export default class RadialLinearScale extends LinearScaleBase {
     }
   }
 
-  /**
-	 * Set radius reductions and determine new radius and center point
-	 * @private
-	 */
-  _setReductions(largestPossibleRadius, furthestLimits, furthestAngles) {
-    let radiusReductionLeft = furthestLimits.l / Math.sin(furthestAngles.l);
-    let radiusReductionRight = Math.max(furthestLimits.r - this.width, 0) / Math.sin(furthestAngles.r);
-    let radiusReductionTop = -furthestLimits.t / Math.cos(furthestAngles.t);
-    let radiusReductionBottom = -Math.max(furthestLimits.b - (this.height - this.paddingTop), 0) / Math.cos(furthestAngles.b);
-
-    radiusReductionLeft = numberOrZero(radiusReductionLeft);
-    radiusReductionRight = numberOrZero(radiusReductionRight);
-    radiusReductionTop = numberOrZero(radiusReductionTop);
-    radiusReductionBottom = numberOrZero(radiusReductionBottom);
-
-    this.drawingArea = Math.max(largestPossibleRadius / 2, Math.min(
-      Math.floor(largestPossibleRadius - (radiusReductionLeft + radiusReductionRight) / 2),
-      Math.floor(largestPossibleRadius - (radiusReductionTop + radiusReductionBottom) / 2)));
-    this.setCenterPoint(radiusReductionLeft, radiusReductionRight, radiusReductionTop, radiusReductionBottom);
-  }
-
   setCenterPoint(leftMovement, rightMovement, topMovement, bottomMovement) {
-    const maxRight = this.width - rightMovement - this.drawingArea;
-    const maxLeft = leftMovement + this.drawingArea;
-    const maxTop = topMovement + this.drawingArea;
-    const maxBottom = (this.height - this.paddingTop) - bottomMovement - this.drawingArea;
-
-    this.xCenter = Math.floor(((maxLeft + maxRight) / 2) + this.left);
-    this.yCenter = Math.floor(((maxTop + maxBottom) / 2) + this.top + this.paddingTop);
+    this.xCenter += Math.floor((leftMovement - rightMovement) / 2);
+    this.yCenter += Math.floor((topMovement - bottomMovement) / 2);
+    this.drawingArea -= Math.min(this.drawingArea / 2, Math.max(leftMovement, rightMovement, topMovement, bottomMovement));
   }
 
   getIndexAngle(index) {

test/fixtures/controller.polarArea/pointLabels/centered-180.js

@@ -0,0 +1,26 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          startAngle: 180,
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/centered-45.js

@@ -0,0 +1,26 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          startAngle: 45,
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/centered.js

@@ -0,0 +1,25 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/default-180.js

@@ -0,0 +1,25 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          startAngle: 180,
+          pointLabels: {
+            display: true,
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/default-45.js

@@ -0,0 +1,25 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          startAngle: 45,
+          pointLabels: {
+            display: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/default.js

@@ -0,0 +1,24 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          pointLabels: {
+            display: true,
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/withTitle/bottom-centered-45.js

@@ -0,0 +1,34 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          position: 'bottom',
+          text: 'Chart Title'
+        },
+        legend: false
+      },
+      scales: {
+        r: {
+          startAngle: 45,
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/withTitle/bottom-centered.js

@@ -0,0 +1,33 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          position: 'bottom',
+          text: 'Chart Title'
+        },
+        legend: false
+      },
+      scales: {
+        r: {
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/withTitle/left-centered-45.js

@@ -0,0 +1,34 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          position: 'left',
+          text: 'Chart Title'
+        },
+        legend: false
+      },
+      scales: {
+        r: {
+          startAngle: 45,
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/withTitle/left-centered.js

@@ -0,0 +1,33 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          position: 'left',
+          text: 'Chart Title'
+        },
+        legend: false
+      },
+      scales: {
+        r: {
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/withTitle/right-centered-45.js

@@ -0,0 +1,34 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          position: 'right',
+          text: 'Chart Title'
+        },
+        legend: false
+      },
+      scales: {
+        r: {
+          startAngle: 45,
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/withTitle/right-centered.js

@@ -0,0 +1,33 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          position: 'right',
+          text: 'Chart Title'
+        },
+        legend: false
+      },
+      scales: {
+        r: {
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/withTitle/top-centered-45.js

@@ -0,0 +1,33 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          text: 'Chart Title'
+        },
+        legend: false
+      },
+      scales: {
+        r: {
+          startAngle: 45,
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/withTitle/top-centered.js

@@ -0,0 +1,32 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          text: 'Chart Title'
+        },
+        legend: false
+      },
+      scales: {
+        r: {
+          pointLabels: {
+            display: true,
+            centerPointLabels: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/withTitle/top-default-45.js

@@ -0,0 +1,32 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          text: 'Chart Title'
+        },
+        legend: false
+      },
+      scales: {
+        r: {
+          startAngle: 45,
+          pointLabels: {
+            display: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.polarArea/pointLabels/withTitle/top-default.js

@@ -0,0 +1,31 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      datasets: [{
+        data: [1, 2, 3, 4],
+        backgroundColor: ['#f003', '#0f03', '#00f3', '#0003']
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          text: 'Chart Title'
+        },
+        legend: false
+      },
+      scales: {
+        r: {
+          pointLabels: {
+            display: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.radar/startAngle/135.js

@@ -0,0 +1,30 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      datasets: [{
+        data: [6, 3, 2, 3],
+        borderWidth: 3,
+        borderColor: 'blue'
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          min: 0,
+          startAngle: 135,
+          pointLabels: {
+            display: true
+          },
+          grid: {
+            circular: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.radar/startAngle/180.js

@@ -0,0 +1,30 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      datasets: [{
+        data: [6, 3, 2, 3],
+        borderWidth: 3,
+        borderColor: 'blue'
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          min: 0,
+          startAngle: 180,
+          pointLabels: {
+            display: true
+          },
+          grid: {
+            circular: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.radar/startAngle/225.js

@@ -0,0 +1,30 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      datasets: [{
+        data: [6, 3, 2, 3],
+        borderWidth: 3,
+        borderColor: 'blue'
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          min: 0,
+          startAngle: 225,
+          pointLabels: {
+            display: true
+          },
+          grid: {
+            circular: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.radar/startAngle/270.js

@@ -0,0 +1,30 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      datasets: [{
+        data: [6, 3, 2, 3],
+        borderWidth: 3,
+        borderColor: 'blue'
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          min: 0,
+          startAngle: 270,
+          pointLabels: {
+            display: true
+          },
+          grid: {
+            circular: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.radar/startAngle/315.js

@@ -0,0 +1,30 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      datasets: [{
+        data: [6, 3, 2, 3],
+        borderWidth: 3,
+        borderColor: 'blue'
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          min: 0,
+          startAngle: 315,
+          pointLabels: {
+            display: true
+          },
+          grid: {
+            circular: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.radar/startAngle/45.js

@@ -0,0 +1,30 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      datasets: [{
+        data: [6, 3, 2, 3],
+        borderWidth: 3,
+        borderColor: 'blue'
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          min: 0,
+          startAngle: 45,
+          pointLabels: {
+            display: true
+          },
+          grid: {
+            circular: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.radar/startAngle/90.js

@@ -0,0 +1,30 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      datasets: [{
+        data: [6, 3, 2, 3],
+        borderWidth: 3,
+        borderColor: 'blue'
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          min: 0,
+          startAngle: 90,
+          pointLabels: {
+            display: true
+          },
+          grid: {
+            circular: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/controller.radar/startAngle/default.js

@@ -0,0 +1,29 @@
+module.exports = {
+  config: {
+    type: 'radar',
+    data: {
+      datasets: [{
+        data: [6, 3, 2, 3],
+        borderWidth: 3,
+        borderColor: 'blue'
+      }],
+      labels: [['label 1', 'line 2'], ['label 2', 'line 2'], ['label 3', 'line 2'], ['label 4', 'line 2']]
+    },
+    options: {
+      scales: {
+        r: {
+          min: 0,
+          pointLabels: {
+            display: true
+          },
+          grid: {
+            circular: true
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/specs/controller.polarArea.tests.js

@@ -105,18 +105,18 @@ describe('Chart.controllers.polarArea', function() {
     expect(meta.data.length).toBe(4);
 
     [
-      {o: 177, s: -0.5 * Math.PI, e: 0},
-      {o: 240, s: 0, e: 0.5 * Math.PI},
+      {o: 174, s: -0.5 * Math.PI, e: 0},
+      {o: 236, s: 0, e: 0.5 * Math.PI},
       {o: 51, s: 0.5 * Math.PI, e: Math.PI},
       {o: 0, s: Math.PI, e: 1.5 * Math.PI}
     ].forEach(function(expected, i) {
-      expect(meta.data[i].x).toBeCloseToPixel(256);
-      expect(meta.data[i].y).toBeCloseToPixel(259);
-      expect(meta.data[i].innerRadius).toBeCloseToPixel(0);
-      expect(meta.data[i].outerRadius).toBeCloseToPixel(expected.o);
-      expect(meta.data[i].startAngle).toBe(expected.s);
-      expect(meta.data[i].endAngle).toBe(expected.e);
-      expect(meta.data[i].options).toEqual(jasmine.objectContaining({
+      expect(meta.data[i].x).withContext(i).toBeCloseToPixel(256);
+      expect(meta.data[i].y).withContext(i).toBeCloseToPixel(256);
+      expect(meta.data[i].innerRadius).withContext(i).toBeCloseToPixel(0);
+      expect(meta.data[i].outerRadius).withContext(i).toBeCloseToPixel(expected.o);
+      expect(meta.data[i].startAngle).withContext(i).toBe(expected.s);
+      expect(meta.data[i].endAngle).withContext(i).toBe(expected.e);
+      expect(meta.data[i].options).withContext(i).toEqual(jasmine.objectContaining({
         backgroundColor: 'rgb(255, 0, 0)',
         borderColor: 'rgb(0, 255, 0)',
         borderWidth: 1.2
@@ -139,9 +139,9 @@ describe('Chart.controllers.polarArea', function() {
     chart.update();
 
     expect(meta.data[0].x).toBeCloseToPixel(256);
-    expect(meta.data[0].y).toBeCloseToPixel(259);
+    expect(meta.data[0].y).toBeCloseToPixel(256);
     expect(meta.data[0].innerRadius).toBeCloseToPixel(0);
-    expect(meta.data[0].outerRadius).toBeCloseToPixel(177);
+    expect(meta.data[0].outerRadius).toBeCloseToPixel(174);
   });
 
   it('should update elements with start angle from options', function() {
@@ -179,18 +179,18 @@ describe('Chart.controllers.polarArea', function() {
     expect(meta.data.length).toBe(4);
 
     [
-      {o: 177, s: 0, e: 0.5 * Math.PI},
-      {o: 240, s: 0.5 * Math.PI, e: Math.PI},
+      {o: 174, s: 0, e: 0.5 * Math.PI},
+      {o: 236, s: 0.5 * Math.PI, e: Math.PI},
       {o: 51, s: Math.PI, e: 1.5 * Math.PI},
       {o: 0, s: 1.5 * Math.PI, e: 2.0 * Math.PI}
     ].forEach(function(expected, i) {
-      expect(meta.data[i].x).toBeCloseToPixel(256);
-      expect(meta.data[i].y).toBeCloseToPixel(259);
-      expect(meta.data[i].innerRadius).toBeCloseToPixel(0);
-      expect(meta.data[i].outerRadius).toBeCloseToPixel(expected.o);
-      expect(meta.data[i].startAngle).toBe(expected.s);
-      expect(meta.data[i].endAngle).toBe(expected.e);
-      expect(meta.data[i].options).toEqual(jasmine.objectContaining({
+      expect(meta.data[i].x).withContext(i).toBeCloseToPixel(256);
+      expect(meta.data[i].y).withContext(i).toBeCloseToPixel(256);
+      expect(meta.data[i].innerRadius).withContext(i).toBeCloseToPixel(0);
+      expect(meta.data[i].outerRadius).withContext(i).toBeCloseToPixel(expected.o);
+      expect(meta.data[i].startAngle).withContext(i).toBe(expected.s);
+      expect(meta.data[i].endAngle).withContext(i).toBe(expected.e);
+      expect(meta.data[i].options).withContext(i).toEqual(jasmine.objectContaining({
         backgroundColor: 'rgb(255, 0, 0)',
         borderColor: 'rgb(0, 255, 0)',
         borderWidth: 1.2

test/specs/controller.radar.tests.js

@@ -133,14 +133,14 @@ describe('Chart.controllers.radar', function() {
     }));
 
     [
-      {x: 256, y: 260},
-      {x: 256, y: 260},
-      {x: 256, y: 260},
-      {x: 256, y: 260},
+      {x: 256, y: 256},
+      {x: 256, y: 256},
+      {x: 256, y: 256},
+      {x: 256, y: 256},
     ].forEach(function(expected, i) {
-      expect(meta.data[i].x).toBeCloseToPixel(expected.x);
-      expect(meta.data[i].y).toBeCloseToPixel(expected.y);
-      expect(meta.data[i].options).toEqual(jasmine.objectContaining({
+      expect(meta.data[i].x).withContext(i).toBeCloseToPixel(expected.x);
+      expect(meta.data[i].y).withContext(i).toBeCloseToPixel(expected.y);
+      expect(meta.data[i].options).withContext(i).toEqual(jasmine.objectContaining({
         backgroundColor: Chart.defaults.backgroundColor,
         borderWidth: 1,
         borderColor: Chart.defaults.borderColor,
@@ -153,18 +153,18 @@ describe('Chart.controllers.radar', function() {
     chart.update();
 
     [
-      {x: 256, y: 120, cppx: 246, cppy: 120, cpnx: 272, cpny: 120},
-      {x: 464, y: 260, cppx: 464, cppy: 252, cpnx: 464, cpny: 266},
-      {x: 256, y: 260, cppx: 277, cppy: 260, cpnx: 250, cpny: 260},
-      {x: 200, y: 260, cppx: 200, cppy: 264, cpnx: 200, cpny: 250},
+      {x: 256, y: 122, cppx: 246, cppy: 122, cpnx: 272, cpny: 122},
+      {x: 457, y: 256, cppx: 457, cppy: 249, cpnx: 457, cpny: 262},
+      {x: 256, y: 256, cppx: 277, cppy: 256, cpnx: 250, cpny: 256},
+      {x: 202, y: 256, cppx: 202, cppy: 260, cpnx: 202, cpny: 246},
     ].forEach(function(expected, i) {
-      expect(meta.data[i].x).toBeCloseToPixel(expected.x);
-      expect(meta.data[i].y).toBeCloseToPixel(expected.y);
-      expect(meta.data[i].cp1x).toBeCloseToPixel(expected.cppx);
-      expect(meta.data[i].cp1y).toBeCloseToPixel(expected.cppy);
-      expect(meta.data[i].cp2x).toBeCloseToPixel(expected.cpnx);
-      expect(meta.data[i].cp2y).toBeCloseToPixel(expected.cpny);
-      expect(meta.data[i].options).toEqual(jasmine.objectContaining({
+      expect(meta.data[i].x).withContext(i).toBeCloseToPixel(expected.x);
+      expect(meta.data[i].y).withContext(i).toBeCloseToPixel(expected.y);
+      expect(meta.data[i].cp1x).withContext(i).toBeCloseToPixel(expected.cppx);
+      expect(meta.data[i].cp1y).withContext(i).toBeCloseToPixel(expected.cppy);
+      expect(meta.data[i].cp2x).withContext(i).toBeCloseToPixel(expected.cpnx);
+      expect(meta.data[i].cp2y).withContext(i).toBeCloseToPixel(expected.cpny);
+      expect(meta.data[i].options).withContext(i).toEqual(jasmine.objectContaining({
         backgroundColor: Chart.defaults.backgroundColor,
         borderWidth: 1,
         borderColor: Chart.defaults.borderColor,
@@ -208,14 +208,14 @@ describe('Chart.controllers.radar', function() {
 
     // Since tension is now 0, we don't care about the control points
     [
-      {x: 256, y: 120},
-      {x: 464, y: 260},
-      {x: 256, y: 260},
-      {x: 200, y: 260},
+      {x: 256, y: 122},
+      {x: 457, y: 256},
+      {x: 256, y: 256},
+      {x: 202, y: 256},
     ].forEach(function(expected, i) {
-      expect(meta.data[i].x).toBeCloseToPixel(expected.x);
-      expect(meta.data[i].y).toBeCloseToPixel(expected.y);
-      expect(meta.data[i].options).toEqual(jasmine.objectContaining({
+      expect(meta.data[i].x).withContext(i).toBeCloseToPixel(expected.x);
+      expect(meta.data[i].y).withContext(i).toBeCloseToPixel(expected.y);
+      expect(meta.data[i].options).withContext(i).toEqual(jasmine.objectContaining({
         backgroundColor: 'rgb(128, 129, 130)',
         borderWidth: 1.123,
         borderColor: 'rgb(56, 57, 58)',

test/specs/core.layouts.tests.js

@@ -121,8 +121,8 @@ describe('Chart.layouts', function() {
     expect(scale.left).toBeCloseToPixel(0);
     expect(scale.right).toBeCloseToPixel(512);
     expect(scale.top).toBeCloseToPixel(32);
-    expect(scale.width).toBeCloseToPixel(512);
-    expect(scale.height).toBeCloseToPixel(480);
+    expect(scale.width).toBeCloseToPixel(496);
+    expect(scale.height).toBeCloseToPixel(464);
   });
 
   it('should fit multiple axes in the same position', function() {

test/specs/scale.radialLinear.tests.js

@@ -407,9 +407,9 @@ describe('Test the radial linear scale', function() {
       }
     });
 
-    expect(chart.scales.r.drawingArea).toBe(227);
+    expect(chart.scales.r.drawingArea).toBe(215);
     expect(chart.scales.r.xCenter).toBe(256);
-    expect(chart.scales.r.yCenter).toBe(284);
+    expect(chart.scales.r.yCenter).toBe(280);
   });
 
   it('should correctly get the label for a given data index', function() {
@@ -459,16 +459,16 @@ describe('Test the radial linear scale', function() {
     });
 
     expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.min)).toBe(0);
-    expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.max)).toBe(227);
+    expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.max)).toBe(215);
 
     var position = chart.scales.r.getPointPositionForValue(1, 5);
-    expect(position.x).toBeCloseToPixel(270);
-    expect(position.y).toBeCloseToPixel(278);
+    expect(position.x).toBeCloseToPixel(269);
+    expect(position.y).toBeCloseToPixel(276);
 
     chart.scales.r.options.reverse = true;
     chart.update();
 
-    expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.min)).toBe(227);
+    expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.min)).toBe(215);
     expect(chart.scales.r.getDistanceFromCenterForValue(chart.scales.r.max)).toBe(0);
   });
 
@@ -495,7 +495,7 @@ describe('Test the radial linear scale', function() {
     });
 
     expect(chart.scales.r.getValueForDistanceFromCenter(0)).toBe(chart.scales.r.min);
-    expect(chart.scales.r.getValueForDistanceFromCenter(227)).toBe(chart.scales.r.max);
+    expect(chart.scales.r.getValueForDistanceFromCenter(215)).toBe(chart.scales.r.max);
 
     var dist = chart.scales.r.getDistanceFromCenterForValue(5);
     expect(chart.scales.r.getValueForDistanceFromCenter(dist)).toBe(5);
@@ -504,7 +504,7 @@ describe('Test the radial linear scale', function() {
     chart.update();
 
     expect(chart.scales.r.getValueForDistanceFromCenter(0)).toBe(chart.scales.r.max);
-    expect(chart.scales.r.getValueForDistanceFromCenter(227)).toBe(chart.scales.r.min);
+    expect(chart.scales.r.getValueForDistanceFromCenter(215)).toBe(chart.scales.r.min);
   });
 
   it('should correctly get angles for all points', function() {
@@ -578,15 +578,12 @@ describe('Test the radial linear scale', function() {
     [{
       startAngle: 30,
       textAlign: ['right', 'right', 'left', 'left', 'left'],
-      y: [82, 366, 506, 319, 53]
     }, {
       startAngle: -30,
       textAlign: ['right', 'right', 'left', 'left', 'right'],
-      y: [319, 506, 366, 82, 53]
     }, {
       startAngle: 750,
       textAlign: ['right', 'right', 'left', 'left', 'left'],
-      y: [82, 366, 506, 319, 53]
     }].forEach(function(expected) {
       scale.options.startAngle = expected.startAngle;
       chart.update();
@@ -599,12 +596,6 @@ describe('Test the radial linear scale', function() {
       }).forEach(function(x, i) {
         expect(x.args[0]).withContext('startAngle: ' + expected.startAngle + ', tick: ' + i).toBe(expected.textAlign[i]);
       });
-
-      scale.ctx.getCalls().filter(function(x) {
-        return x.name === 'fillText';
-      }).map(function(x, i) {
-        expect(x.args[2]).toBeCloseToPixel(expected.y[i]);
-      });
     });
   });