diff --git a/docs/02-Scales.md b/docs/02-Scales.md index af7812ce03b..9061ccd5996 100644 --- a/docs/02-Scales.md +++ b/docs/02-Scales.md @@ -310,14 +310,15 @@ The following additional configuration options are provided by the radial linear Name | Type | Default | Description --- | --- | --- | --- -lineArc | Boolean | false | If true, circular arcs are used else straight lines are used. The former is used by the polar area chart and the latter by the radar chart +labelPoints | Boolean | true | If true, angle lines and point labels are drawn. +*gridLines*.circular | Boolean | false | if true, radial lines are circular. If false, they are straight lines connecting the the different angle line locations. angleLines | Object | - | See the Angle Line Options section below for details. pointLabels | Object | - | See the Point Label Options section below for details. ticks | Object | - | See the Ticks table below for options. #### Angle Line Options -The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the `angleLines` sub options. Note that these options only apply if `lineArc` is false. +The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the `angleLines` sub options. Note that these options only apply if `labelPoints` is true. Name | Type | Default | Description --- | --- | --- | --- @@ -327,7 +328,7 @@ lineWidth | Number | 1 | Width of angled lines #### Point Label Options -The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the `pointLabels` sub options. Note that these options only apply if `lineArc` is false. +The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the `pointLabels` sub options. Note that these options only apply if `labelPoints` is true. Name | Type | Default | Description --- | --- | --- | --- diff --git a/docs/06-Polar-Area-Chart.md b/docs/06-Polar-Area-Chart.md index 4f2d8960d0b..d9b8f8a4d06 100644 --- a/docs/06-Polar-Area-Chart.md +++ b/docs/06-Polar-Area-Chart.md @@ -79,7 +79,6 @@ Name | Type | Default | Description startAngle | Number | -0.5 * Math.PI | Sets the starting angle for the first item in a dataset scale | Object | [See Scales](#scales) and [Defaults for Radial Linear Scale](#scales-radial-linear-scale) | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid. *scale*.type | String |"radialLinear" | As defined in ["Radial Linear"](#scales-radial-linear-scale). -*scale*.lineArc | Boolean | true | When true, lines are circular. *animation*.animateRotate | Boolean |true | If true, will animate the rotation of the chart. *animation*.animateScale | Boolean | true | If true, will animate scaling the chart. *legend*.*labels*.generateLabels | Function | `function(data) {} ` | Returns labels for each the legend diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 78234ea59d4..02dc0ba2397 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -8,7 +8,10 @@ module.exports = function(Chart) { scale: { type: 'radialLinear', - lineArc: true, // so that lines are circular + labelPoints: false, + gridLines: { + circular: true + }, ticks: { beginAtZero: true } diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index b51fa698bd9..ece4a177a56 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -10,15 +10,21 @@ module.exports = function(Chart) { // Boolean - Whether to animate scaling the chart from the centre animate: true, - lineArc: false, position: 'chartArea', + // Boolean - if true, include angle lines and point labels + labelPoints: true, + angleLines: { display: true, color: 'rgba(0, 0, 0, 0.1)', lineWidth: 1 }, + gridLines: { + circular: false + }, + // label settings ticks: { // Boolean - Show a backdrop to the scale label @@ -48,7 +54,7 @@ module.exports = function(Chart) { }; function getValueCount(scale) { - return !scale.options.lineArc ? scale.chart.data.labels.length : 0; + return scale.options.labelPoints ? scale.chart.data.labels.length : 0; } function getPointLabelFontOptions(scale) { @@ -274,7 +280,7 @@ module.exports = function(Chart) { ctx.strokeStyle = helpers.getValueAtIndexOrDefault(gridLineOpts.color, index - 1); ctx.lineWidth = helpers.getValueAtIndexOrDefault(gridLineOpts.lineWidth, index - 1); - if (scale.options.lineArc) { + if (scale.options.gridLines.circular) { // Draw circular arcs between the points ctx.beginPath(); ctx.arc(scale.xCenter, scale.yCenter, radius, 0, Math.PI * 2); @@ -365,10 +371,10 @@ module.exports = function(Chart) { return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]); }, fit: function() { - if (this.options.lineArc) { - fit(this); - } else { + if (this.options.labelPoints) { fitWithPointLabels(this); + } else { + fit(this); } }, /** @@ -502,7 +508,7 @@ module.exports = function(Chart) { } }); - if (!opts.lineArc) { + if (opts.labelPoints) { drawPointLabels(me); } } diff --git a/test/scale.radialLinear.tests.js b/test/scale.radialLinear.tests.js index 69d6c167f92..395cef862b9 100644 --- a/test/scale.radialLinear.tests.js +++ b/test/scale.radialLinear.tests.js @@ -17,6 +17,7 @@ describe('Test the radial linear scale', function() { animate: true, display: true, gridLines: { + circular: false, color: 'rgba(0, 0, 0, 0.1)', drawBorder: true, drawOnChartArea: true, @@ -30,7 +31,7 @@ describe('Test the radial linear scale', function() { borderDash: [], borderDashOffset: 0.0 }, - lineArc: false, + labelPoints: true, pointLabels: { fontSize: 10, callback: defaultConfig.pointLabels.callback, // make this nicer, then check explicitly below