diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md
index adebe77cc61..14009be6a5c 100644
--- a/docs/axes/radial/linear.md
+++ b/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.
diff --git a/docs/charts/radar.md b/docs/charts/radar.md
index ac908315cf9..76548e0e552 100644
--- a/docs/charts/radar.md
+++ b/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:
diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index 9d9206d5cb2..882cdf5cdd0 100644
--- a/src/controllers/controller.line.js
+++ b/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),
diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js
index 5de4e4ede0a..d11e3bdba27 100644
--- a/src/controllers/controller.radar.js
+++ b/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),
diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
index 9f59f17887a..bc7eebe4191 100644
--- a/src/scales/scale.radialLinear.js
+++ b/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;
diff --git a/test/fixtures/controller.radar/radar-span-gaps-disable.json b/test/fixtures/controller.radar/radar-span-gaps-disable.json
new file mode 100644
index 00000000000..a873666c34d
--- /dev/null
+++ b/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
+ }
+ }
+}
\ No newline at end of file
diff --git a/test/fixtures/controller.radar/radar-span-gaps-disable.png b/test/fixtures/controller.radar/radar-span-gaps-disable.png
new file mode 100644
index 00000000000..1217b8b3a8b
Binary files /dev/null and b/test/fixtures/controller.radar/radar-span-gaps-disable.png differ
diff --git a/test/fixtures/controller.radar/radar-span-gaps-enable.json b/test/fixtures/controller.radar/radar-span-gaps-enable.json
new file mode 100644
index 00000000000..07d9ea63fdf
--- /dev/null
+++ b/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
+ }
+ }
+}
\ No newline at end of file
diff --git a/test/fixtures/controller.radar/radar-span-gaps-enable.png b/test/fixtures/controller.radar/radar-span-gaps-enable.png
new file mode 100644
index 00000000000..1217b8b3a8b
Binary files /dev/null and b/test/fixtures/controller.radar/radar-span-gaps-enable.png differ
diff --git a/test/specs/controller.radar.tests.js b/test/specs/controller.radar.tests.js
index df1001420c4..a0409d508ab 100644
--- a/test/specs/controller.radar.tests.js
+++ b/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);
+ });
});