Allow spanning data gaps for radar charts

docs/axes/radial/linear.md

@@ -104,7 +104,7 @@ The following options are used to configure the point labels that are shown on t
 | Name | Type | Default | Description
 | -----| ---- | --------| -----------
 | `callback` | `Function` | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
-| `fontColor` | `Color` | `'#666'` | Font color for point labels.
+| `fontColor` | `Color/Color[]` | `'#666'` | Font color for point labels.
 | `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family to use when rendering labels.
 | `fontSize` | `Number` | 10 | font size in pixels
 | `fontStyle` | `String` | `'normal'` | Font style to use when rendering point labels.

docs/charts/radar.md

@@ -88,6 +88,7 @@ All point* properties can be specified as an array. If these are set to an array
 | `pointHoverBorderColor` | `Color/Color[]` | Point border color when hovered.
 | `pointHoverBorderWidth` | `Number/Number[]` | Border width of point when hovered.
 | `pointHoverRadius` | `Number/Number[]` | The radius of the point when hovered.
+| `spanGaps` | `Boolean` | If true, lines will be drawn between points with no or null data. If false, points with `NaN` data will create a break in the line
 
 ### pointStyle
 The style of point. Options are:

src/controllers/controller.line.js

@@ -68,7 +68,7 @@ module.exports = function(Chart) {
 					// The default behavior of lines is to break at null values, according
 					// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
 					// This option gives lines the ability to span gaps
-					spanGaps: dataset.spanGaps ? dataset.spanGaps : options.spanGaps,
+					spanGaps: (dataset.spanGaps !== undefined ? dataset.spanGaps : options.spanGaps),
 					tension: custom.tension ? custom.tension : helpers.valueOrDefault(dataset.lineTension, lineElementOptions.tension),
 					backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor),
 					borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth),

src/controllers/controller.radar.js

@@ -30,6 +30,7 @@ module.exports = function(Chart) {
 			var meta = me.getMeta();
 			var line = meta.dataset;
 			var points = meta.data;
+			var options = me.chart.options;
 			var custom = line.custom || {};
 			var dataset = me.getDataset();
 			var lineElementOptions = me.chart.options.elements.line;
@@ -50,7 +51,8 @@ module.exports = function(Chart) {
 				// Model
 				_model: {
 					// Appearance
-					tension: custom.tension ? custom.tension : helpers.valueOrDefault(dataset.lineTension, lineElementOptions.tension),
+					// This option gives lines the ability to span gaps
+					spanGaps: (dataset.spanGaps !== undefined ? dataset.spanGaps : options.spanGaps),
 					backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor),
 					borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth),
 					borderColor: custom.borderColor ? custom.borderColor : (dataset.borderColor || lineElementOptions.borderColor),

src/scales/scale.radialLinear.js

@@ -237,7 +237,6 @@ module.exports = function(Chart) {
 
 	function drawPointLabels(scale) {
 		var ctx = scale.ctx;
-		var valueOrDefault = helpers.valueOrDefault;
 		var opts = scale.options;
 		var angleLineOpts = opts.angleLines;
 		var pointLabelOpts = opts.pointLabels;
@@ -267,7 +266,8 @@ module.exports = function(Chart) {
 				var pointLabelPosition = scale.getPointPosition(i, outerDistance + 5);
 
 				// Keep this in loop since we may support array properties here
-				var pointLabelFontColor = valueOrDefault(pointLabelOpts.fontColor, globalDefaults.defaultFontColor);
+				var pointLabelFontColor = helpers.valueAtIndexOrDefault(pointLabelOpts.fontColor, i, globalDefaults.defaultFontColor);
+
 				ctx.font = plFont.font;
 				ctx.fillStyle = pointLabelFontColor;
 

test/fixtures/controller.radar/radar-span-gaps-disable.json

@@ -0,0 +1,36 @@
+{
+    "config": {
+        "type": "radar",
+        "data": {
+            "labels": ["0", "1", "2", "3", "4", "5", "6", "7"],
+            "datasets": [{
+                "backgroundColor": "transparent",
+                "data": [4, 2, null, 3, 2.5, null, 2, 4],
+                "spanGaps": false
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scale": {
+                "display": false
+            },
+            "elements": {
+                "point": {
+                    "radius": 0
+                },
+                "line": {
+                    "borderColor": "pink",
+                    "fill": "origin"
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 256
+        }
+    }
+}

test/fixtures/controller.radar/radar-span-gaps-enable.json

@@ -0,0 +1,36 @@
+{
+    "config": {
+        "type": "radar",
+        "data": {
+            "labels": ["0", "1", "2", "3", "4", "5", "6", "7"],
+            "datasets": [{
+                "backgroundColor": "transparent",
+                "data": [4, 2, null, 3, 2.5, null, 2, 4],
+                "spanGaps": true
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "legend": false,
+            "title": false,
+            "scale": {
+                "display": false
+            },
+            "elements": {
+                "point": {
+                    "radius": 0
+                },
+                "line": {
+                    "borderColor": "pink",
+                    "fill": "origin"
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 256
+        }
+    }
+}

test/specs/controller.radar.tests.js

@@ -1,4 +1,6 @@
 describe('Chart.controllers.radar', function() {
+	describe('auto', jasmine.specsFromFixtures('controller.radar'));
+
 	it('Should be constructed', function() {
 		var chart = window.acquireChart({
 			type: 'radar',
@@ -480,4 +482,19 @@ describe('Chart.controllers.radar', function() {
 		expect(meta0.data[0]._model.radius).toBe(10);
 		expect(meta1.data[0]._model.radius).toBe(20);
 	});
+
+	it('should allow spanGaps to be set to true', function() {
+		var chart = window.acquireChart({
+			type: 'radar',
+			data: {
+				datasets: [{
+					data: [10, 15, NaN, 4],
+					spanGaps: true,
+				}],
+				labels: ['label1', 'label2', 'label3', 'label4'],
+			}
+		});
+		var meta = chart.getDatasetMeta(0);
+		expect(meta.dataset._model.spanGaps).toBe(true);
+	});
 });