Radial linear scale array properties for line width and color

diff --git a/docs/02-Scales.md b/docs/02-Scales.md
index d0531a00dd46c84e5bfaff04d9fb712e9bdeb36a..89a30beb12b6e311f61775e6064f0e9a3e85e90e 100644 (file)
--- a/docs/02-Scales.md
+++ b/docs/02-Scales.md
@@ -44,8 +44,8 @@ The grid line configuration is nested under the scale configuration in the `grid
 Name | Type | Default | Description
 --- | --- | --- | ---
 display | Boolean | true |
-color | Color | "rgba(0, 0, 0, 0.1)" | Color of the grid lines.
-lineWidth | Number | 1 | Stroke width of grid lines
+color | Color or Array[Color] | "rgba(0, 0, 0, 0.1)" | Color of the grid lines.
+lineWidth | Number or Array[Number] | 1 | Stroke width of grid lines
 drawBorder | Boolean | true | If true draw border on the edge of the chart
 drawOnChartArea | Boolean | true | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn
 drawTicks | Boolean | true |  If true, draw lines beside the ticks in the axis area beside the chart.

diff --git a/samples/radar.html b/samples/radar.html
index 20ece21eb006aa20be893ad5f24ff469614b24ca..fc888a0750c62fe7dce0969bf0b70363281fc276 100644 (file)
--- a/samples/radar.html
+++ b/samples/radar.html
@@ -66,6 +66,9 @@
             },
             scale: {
               reverse: false,
+              gridLines: {
+                color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
+              },
               ticks: {
                 beginAtZero: true
               }

diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
index de686eeddb08d3b904078aa0373ceb96f42a1c11..e9dfe96c04b082dfe2570cf2036c0137cde4f61a 100644 (file)
--- a/src/scales/scale.radialLinear.js
+++ b/src/scales/scale.radialLinear.js
@@ -296,9 +296,9 @@ module.exports = function(Chart) {
                                                var yHeight = me.yCenter - yCenterOffset;
 
                                                // Draw circular lines around the scale
-                                               if (gridLineOpts.display) {
-                                                       ctx.strokeStyle = gridLineOpts.color;
-                                                       ctx.lineWidth = gridLineOpts.lineWidth;
+                                               if (gridLineOpts.display && index !== 0) {
+                                                       ctx.strokeStyle = helpers.getValueAtIndexOrDefault(gridLineOpts.color, index - 1);
+                                                       ctx.lineWidth = helpers.getValueAtIndexOrDefault(gridLineOpts.lineWidth, index - 1);
 
                                                        if (opts.lineArc) {
                                                                // Draw circular arcs between the points