diff --git a/docs/05-Radar-Chart.md b/docs/05-Radar-Chart.md index dbf3f3c57..e974d2a19 100644 --- a/docs/05-Radar-Chart.md +++ b/docs/05-Radar-Chart.md @@ -98,7 +98,7 @@ scale | Object | [See Scales](#scales) and [Defaults for Radial Linear Scale](#s *scale*.type | String |"radialLinear" | As defined in ["Radial Linear"](#scales-radial-linear-scale). *elements*.line | Object | | Options for all line elements used on the chart, as defined in the global elements, duplicated here to show Radar chart specific defaults. *elements.line*.lineTension | Number | 0 | Tension exhibited by lines when calculating splineCurve. Setting to 0 creates straight lines. -offsetAngle | Number | 0 | The number of degrees to rotate the chart clockwise. +startAngle | Number | 0 | The number of degrees to rotate the chart clockwise. You can override these for your `Chart` instance by passing a second argument into the `Radar` method as an object with the keys you want to override. diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 900ade4ea..d0cb7f2c6 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -232,14 +232,14 @@ module.exports = function(Chart) { getIndexAngle: function(index) { var angleMultiplier = (Math.PI * 2) / this.getValueCount(); - var offsetAngle = this.chart.options && this.chart.options.offsetAngle ? - this.chart.options.offsetAngle : + var startAngle = this.chart.options && this.chart.options.startAngle ? + this.chart.options.startAngle : 0; - var offsetAngleRadians = offsetAngle * Math.PI * 2 / 360; + var startAngleRadians = startAngle * Math.PI * 2 / 360; // Start from the top instead of right, so remove a quarter of the circle - return index * angleMultiplier - (Math.PI / 2) + offsetAngleRadians; + return index * angleMultiplier - (Math.PI / 2) + startAngleRadians; }, getDistanceFromCenterForValue: function(value) { var me = this; diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js index d7b61695e..bb84181e1 100644 --- a/test/scale.radialLinear.tests.js +++ b/test/scale.radialLinear.tests.js @@ -420,4 +420,43 @@ describe('Test the radial linear scale', function() { expect(chartInstance.scale.getDistanceFromCenterForValue(chartInstance.scale.min)).toBe(225); expect(chartInstance.scale.getDistanceFromCenterForValue(chartInstance.scale.max)).toBe(0); }); + + it('should correctly get angles for all points', function() { + chartInstance = window.acquireChart({ + type: 'radar', + data: { + datasets: [{ + data: [10, 5, 0, 25, 78] + }], + labels: ['label1', 'label2', 'label3', 'label4', 'label5'] + }, + options: { + scale: { + pointLabels: { + callback: function(value, index) { + return index.toString(); + } + } + }, + startAngle: 15 + } + }); + + var radToNearestDegree = function(rad) { + return Math.round((360 * rad) / (2 * Math.PI)); + } + + var slice = 72; // (360 / 5) + + for(var i = 0; i < 5; i++) { + expect(radToNearestDegree(chartInstance.scale.getIndexAngle(i))).toBe(15 + (slice * i) - 90); + } + + chartInstance.options.startAngle = 0; + chartInstance.update(); + + for(var i = 0; i < 5; i++) { + expect(radToNearestDegree(chartInstance.scale.getIndexAngle(i))).toBe((slice * i) - 90); + } + }); });