Make line options scriptable (#6128)

docs/charts/line.md

@@ -43,15 +43,15 @@ The line chart allows a number of properties to be specified for each dataset. T
 
 | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
 | ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
-| [`borderCapStyle`](#line-styling) | `string` | - | - | `'butt'`
-| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
-| [`borderDash`](#line-styling) | `number[]` | - | - | `[]`
-| [`borderDashOffset`](#line-styling) | `number` | - | - | `0.0`
-| [`borderJoinStyle`](#line-styling) | `string` | - | - | `'miter'`
-| [`borderWidth`](#line-styling) | `number` | - | - | `3`
-| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | - | - | `''`
-| [`fill`](#line-styling) | <code>boolean&#124;string</code> | - | - | `true`
+| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
+| [`borderCapStyle`](#line-styling) | `string` | Yes | - | `'butt'`
+| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
+| [`borderDash`](#line-styling) | `number[]` | Yes | - | `[]`
+| [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
+| [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
+| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
+| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `''`
+| [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `true`
 | [`label`](#general) | `string` | - | - | `''`
 | [`lineTension`](#line-styling) | `number` | - | - | `0.4`
 | [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`

samples/scriptable/line.html

@@ -26,14 +26,17 @@
 
 		utils.srand(110);
 
+		function getLineColor(ctx) {
+			return utils.color(ctx.datasetIndex);
+		}
+
 		function alternatePointStyles(ctx) {
 			var index = ctx.dataIndex;
 			return index % 2 === 0 ? 'circle' : 'rect';
 		}
 
 		function makeHalfAsOpaque(ctx) {
-			var c = ctx.dataset.backgroundColor;
-			return utils.transparentize(c);
+			return utils.transparentize(getLineColor(ctx));
 		}
 
 		function adjustRadiusBasedOnData(ctx) {
@@ -56,9 +59,7 @@
 		var data = {
 			labels: utils.months({count: DATA_COUNT}),
 			datasets: [{
-				data: generateData(),
-				backgroundColor: '#4dc9f6',
-				borderColor: '#4dc9f6',
+				data: generateData()
 			}]
 		};
 
@@ -68,8 +69,11 @@
 			elements: {
 				line: {
 					fill: false,
+					backgroundColor: getLineColor,
+					borderColor: getLineColor,
 				},
 				point: {
+					backgroundColor: getLineColor,
 					hoverBackgroundColor: makeHalfAsOpaque,
 					radius: adjustRadiusBasedOnData,
 					pointStyle: alternatePointStyles,
@@ -87,12 +91,8 @@
 
 		// eslint-disable-next-line no-unused-vars
 		function addDataset() {
-			var newColor = utils.color(chart.data.datasets.length);
-
 			chart.data.datasets.push({
-				data: generateData(),
-				backgroundColor: newColor,
-				borderColor: newColor
+				data: generateData()
 			});
 			chart.update();
 		}

src/controllers/controller.line.js

@@ -179,23 +179,31 @@ module.exports = DatasetController.extend({
 	_resolveLineOptions: function(element) {
 		var me = this;
 		var chart = me.chart;
-		var dataset = chart.data.datasets[me.index];
+		var datasetIndex = me.index;
+		var dataset = chart.data.datasets[datasetIndex];
 		var custom = element.custom || {};
 		var options = chart.options;
 		var elementOptions = options.elements.line;
 		var values = {};
 		var i, ilen, key;
 
+		// Scriptable options
+		var context = {
+			chart: chart,
+			dataset: dataset,
+			datasetIndex: datasetIndex
+		};
+
 		var keys = [
 			'backgroundColor',
-			'borderWidth',
-			'borderColor',
 			'borderCapStyle',
+			'borderColor',
 			'borderDash',
 			'borderDashOffset',
 			'borderJoinStyle',
-			'fill',
-			'cubicInterpolationMode'
+			'borderWidth',
+			'cubicInterpolationMode',
+			'fill'
 		];
 
 		for (i = 0, ilen = keys.length; i < ilen; ++i) {
@@ -204,7 +212,7 @@ module.exports = DatasetController.extend({
 				custom[key],
 				dataset[key],
 				elementOptions[key]
-			]);
+			], context);
 		}
 
 		// The default behavior of lines is to break at null values, according

test/fixtures/controller.line/backgroundColor/scriptable.js

@@ -6,18 +6,17 @@ module.exports = {
 			datasets: [
 				{
 					// option in dataset
-					data: [0, 5, 10, null, -10, -5],
-					pointBackgroundColor: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 8 ? '#ff0000'
-							: value > 0 ? '#00ff00'
-							: value > -8 ? '#0000ff'
+					data: [4, 5, 10, null, -10, -5],
+					backgroundColor: function(ctx) {
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index === 0 ? '#ff0000'
+							: index === 1 ? '#00ff00'
 							: '#ff00ff';
 					}
 				},
 				{
 					// option in element (fallback)
-					data: [4, -5, -10, null, 10, 5],
+					data: [-4, -5, -10, null, 10, 5],
 				}
 			]
 		},
@@ -26,19 +25,21 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
-					fill: false,
+					backgroundColor: function(ctx) {
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index === 0 ? '#ff0000'
+							: index === 1 ? '#00ff00'
+							: '#ff00ff';
+					}
 				},
 				point: {
-					backgroundColor: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 8 ? '#ff00ff'
-							: value > 0 ? '#0000ff'
-							: value > -8 ? '#ff0000'
-							: '#00ff00';
-					},
-					radius: 10,
+					backgroundColor: '#0000ff',
+					radius: 10
 				}
 			},
+			layout: {
+				padding: 32
+			},
 			scales: {
 				xAxes: [{display: false}],
 				yAxes: [

test/fixtures/controller.line/backgroundColor/value.js

@@ -7,7 +7,7 @@ module.exports = {
 				{
 					// option in dataset
 					data: [0, 5, 10, null, -10, -5],
-					pointBackgroundColor: '#ff0000'
+					backgroundColor: '#ff0000'
 				},
 				{
 					// option in element (fallback)
@@ -20,13 +20,15 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
-					fill: false,
+					backgroundColor: '#00ff00'
 				},
 				point: {
-					backgroundColor: '#00ff00',
-					radius: 10,
+					radius: 10
 				}
 			},
+			layout: {
+				padding: 32
+			},
 			scales: {
 				xAxes: [{display: false}],
 				yAxes: [{display: false}]

test/fixtures/controller.line/borderCapStyle/scriptable.js

@@ -0,0 +1,68 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3],
+			datasets: [
+				{
+					// option in dataset
+					data: [null, 3, 3],
+					borderCapStyle: function(ctx) {
+						var index = (ctx.datasetIndex % 2);
+						return index === 0 ? 'round'
+							: index === 1 ? 'square'
+							: 'butt';
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [null, 2, 2],
+				},
+				{
+					// option in element (fallback)
+					data: [null, 1, 1],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderCapStyle: function(ctx) {
+						var index = (ctx.datasetIndex % 3);
+						return index === 0 ? 'round'
+							: index === 1 ? 'square'
+							: 'butt';
+					},
+					borderColor: '#ff0000',
+					borderWidth: 32,
+					fill: false
+				},
+				point: {
+					radius: 10,
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/borderCapStyle/value.js

@@ -0,0 +1,52 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3],
+			datasets: [
+				{
+					// option in dataset
+					data: [null, 3, 3],
+					borderCapStyle: 'round',
+				},
+				{
+					// option in dataset
+					data: [null, 2, 2],
+					borderCapStyle: 'square',
+				},
+				{
+					// option in element (fallback)
+					data: [null, 1, 1],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderCapStyle: 'butt',
+					borderColor: '#00ff00',
+					borderWidth: 32,
+					fill: false,
+				},
+				point: {
+					radius: 10,
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/borderColor/scriptable.js

@@ -6,18 +6,17 @@ module.exports = {
 			datasets: [
 				{
 					// option in dataset
-					data: [0, 5, 10, null, -10, -5],
-					pointBorderColor: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 8 ? '#ff0000'
-							: value > 0 ? '#00ff00'
-							: value > -8 ? '#0000ff'
-							: '#ff00ff';
+					data: [4, 5, 10, null, -10, -5],
+					borderColor: function(ctx) {
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index === 0 ? '#ff0000'
+							: index === 1 ? '#00ff00'
+							: '#0000ff';
 					}
 				},
 				{
 					// option in element (fallback)
-					data: [4, -5, -10, null, 10, 5],
+					data: [-4, -5, -10, null, 10, 5]
 				}
 			]
 		},
@@ -26,19 +25,24 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
-					fill: false,
+					borderColor: function(ctx) {
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index === 0 ? '#ff0000'
+							: index === 1 ? '#00ff00'
+							: '#0000ff';
+					},
+					borderWidth: 10,
+					fill: false
 				},
 				point: {
-					borderColor: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 8 ? '#ff00ff'
-							: value > 0 ? '#0000ff'
-							: value > -8 ? '#ff0000'
-							: '#00ff00';
-					},
-					radius: 10,
+					borderColor: '#ff0000',
+					borderWidth: 10,
+					radius: 16
 				}
 			},
+			layout: {
+				padding: 32
+			},
 			scales: {
 				xAxes: [{display: false}],
 				yAxes: [

test/fixtures/controller.line/borderColor/value.js

@@ -7,7 +7,7 @@ module.exports = {
 				{
 					// option in dataset
 					data: [0, 5, 10, null, -10, -5],
-					pointBorderColor: '#ff0000'
+					borderColor: '#ff0000'
 				},
 				{
 					// option in element (fallback)
@@ -20,13 +20,17 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
+					borderColor: '#0000ff',
 					fill: false,
 				},
 				point: {
-					borderColor: '#00ff00',
+					borderColor: '#0000ff',
 					radius: 10,
 				}
 			},
+			layout: {
+				padding: 32
+			},
 			scales: {
 				xAxes: [{display: false}],
 				yAxes: [{display: false}]

test/fixtures/controller.line/borderDash/scriptable.js

@@ -0,0 +1,56 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [4, 5, 10, null, -10, -5],
+					borderDash: function(ctx) {
+						return ctx.datasetIndex === 0 ? [5] : [10];
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [-4, -5, -10, null, 10, 5]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderColor: '#00ff00',
+					borderDash: function(ctx) {
+						return ctx.datasetIndex === 0 ? [5] : [10];
+					}
+				},
+				point: {
+					radius: 10,
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/borderDash/value.js

@@ -0,0 +1,47 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderColor: '#ff0000',
+					borderDash: [5]
+				},
+				{
+					// option in element (fallback)
+					data: [4, -5, -10, null, 10, 5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderColor: '#00ff00',
+					borderDash: [10],
+					fill: false,
+				},
+				point: {
+					radius: 10,
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/borderDashOffset/scriptable.js

@@ -0,0 +1,53 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3],
+			datasets: [
+				{
+					// option in dataset
+					data: [1, 1, 1, 1],
+					borderColor: '#ff0000',
+					borderDash: [20],
+					borderDashOffset: function(ctx) {
+						return ctx.datasetIndex === 0 ? 5.0 : 0.0;
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [0, 0, 0, 0]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderColor: '#00ff00',
+					borderDash: [20],
+					borderDashOffset: function(ctx) {
+						return ctx.datasetIndex === 0 ? 5.0 : 0.0;
+					},
+					fill: false,
+				},
+				point: {
+					radius: 10,
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/borderDashOffset/value.js

@@ -0,0 +1,49 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [1, 1, 1, 1, 1, 1],
+					borderColor: '#ff0000',
+					borderDash: [20],
+					borderDashOffset: 5.0
+				},
+				{
+					// option in element (fallback)
+					data: [0, 0, 0, 0, 0, 0]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderColor: '#00ff00',
+					borderDash: [20],
+					borderDashOffset: 0.0, // default
+					fill: false,
+				},
+				point: {
+					radius: 10,
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/borderJoinStyle/scriptable.js

@@ -0,0 +1,61 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2],
+			datasets: [
+				{
+					// option in dataset
+					data: [6, 18, 6],
+					borderColor: '#ff0000',
+					borderJoinStyle: function(ctx) {
+						var index = ctx.datasetIndex % 3;
+						return index === 0 ? 'round'
+							: index === 1 ? 'miter'
+							: 'bevel';
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [2, 14, 2],
+					borderColor: '#0000ff',
+				},
+				{
+					// option in element (fallback)
+					data: [-2, 10, -2]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderColor: '#00ff00',
+					borderJoinStyle: function(ctx) {
+						var index = (ctx.datasetIndex % 3);
+						return index === 0 ? 'round'
+							: index === 1 ? 'miter'
+							: 'bevel';
+					},
+					borderWidth: 25,
+					fill: false,
+					tension: 0
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/borderJoinStyle/value.js

@@ -0,0 +1,52 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2],
+			datasets: [
+				{
+					// option in dataset
+					data: [6, 18, 6],
+					borderColor: '#ff0000',
+					borderJoinStyle: 'round',
+				},
+				{
+					// option in element (fallback)
+					data: [2, 14, 2],
+					borderColor: '#0000ff',
+					borderJoinStyle: 'bevel',
+				},
+				{
+					// option in element (fallback)
+					data: [-2, 10, -2]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderColor: '#00ff00',
+					borderJoinStyle: 'miter',
+					borderWidth: 25,
+					fill: false,
+					tension: 0
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/borderWidth/scriptable.js

@@ -6,18 +6,17 @@ module.exports = {
 			datasets: [
 				{
 					// option in dataset
-					data: [0, 5, 10, null, -10, -5],
-					pointBorderColor: '#0000ff',
-					pointBorderWidth: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 4 ? 10
-							: value > -4 ? 5
-							: 2;
-					}
+					data: [4, 5, 10, null, -10, -5],
+					borderColor: '#0000ff',
+					borderWidth: function(ctx) {
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index % 2 ? 10 : 20;
+					},
+					pointBorderColor: '#00ff00'
 				},
 				{
 					// option in element (fallback)
-					data: [4, -5, -10, null, 10, 5],
+					data: [-4, -5, -10, null, 10, 5],
 				}
 			]
 		},
@@ -26,19 +25,22 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
+					borderColor: '#ff0000',
+					borderWidth: function(ctx) {
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index % 2 ? 10 : 20;
+					},
 					fill: false,
 				},
 				point: {
-					borderColor: '#ff0000',
-					borderWidth: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 4 ? 2
-							: value > -4 ? 5
-							: 10;
-					},
-					radius: 10,
+					borderColor: '#00ff00',
+					borderWidth: 5,
+					radius: 10
 				}
 			},
+			layout: {
+				padding: 32
+			},
 			scales: {
 				xAxes: [{display: false}],
 				yAxes: [

test/fixtures/controller.line/borderWidth/value.js

@@ -7,8 +7,8 @@ module.exports = {
 				{
 					// option in dataset
 					data: [0, 5, 10, null, -10, -5],
-					pointBorderColor: '#0000ff',
-					pointBorderWidth: 6
+					borderColor: '#0000ff',
+					borderWidth: 6
 				},
 				{
 					// option in element (fallback)
@@ -21,14 +21,17 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
+					borderColor: '#00ff00',
+					borderWidth: 3,
 					fill: false,
 				},
 				point: {
-					borderColor: '#00ff00',
-					borderWidth: 3,
 					radius: 10,
 				}
 			},
+			layout: {
+				padding: 32
+			},
 			scales: {
 				xAxes: [{display: false}],
 				yAxes: [{display: false}]

test/fixtures/controller.line/cubicInterpolationMode/scriptable.js

@@ -0,0 +1,49 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 4, 2, 6, 4, 8],
+					borderColor: '#ff0000',
+					cubicInterpolationMode: function(ctx) {
+						return ctx.datasetIndex === 0 ? 'monotone' : 'default';
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [2, 6, 4, 8, 6, 10],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderColor: '#00ff00',
+					borderWidth: 20,
+					cubicInterpolationMode: function(ctx) {
+						return ctx.datasetIndex === 0 ? 'monotone' : 'default';
+					},
+					fill: false
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/cubicInterpolationMode/value.js

@@ -0,0 +1,45 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 4, 2, 6, 4, 8],
+					borderColor: '#ff0000',
+					cubicInterpolationMode: 'monotone'
+				},
+				{
+					// option in element (fallback)
+					data: [2, 6, 4, 8, 6, 10]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderColor: '#00ff00',
+					borderWidth: 20,
+					cubicInterpolationMode: 'default',
+					fill: false,
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/fill/scriptable.js

@@ -0,0 +1,47 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [-2, -6, -4, -8, -6, -10],
+					backgroundColor: '#ff0000',
+					fill: function(ctx) {
+						return ctx.datasetIndex === 0 ? true : false;
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [0, 4, 2, 6, 4, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					backgroundColor: '#00ff00',
+					fill: function(ctx) {
+						return ctx.datasetIndex === 0 ? true : false;
+					}
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/fill/value.js

@@ -0,0 +1,43 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [-2, -6, -4, -8, -6, -10],
+					backgroundColor: '#ff0000',
+					fill: false
+				},
+				{
+					// option in element (fallback)
+					data: [0, 4, 2, 6, 4, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					backgroundColor: '#00ff00',
+					fill: true,
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/pointBackgroundColor/scriptable.js

@@ -0,0 +1,61 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					pointBackgroundColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff0000'
+							: value > 0 ? '#00ff00'
+							: value > -8 ? '#0000ff'
+							: '#ff00ff';
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [4, -5, -10, null, 10, 5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					fill: false,
+				},
+				point: {
+					backgroundColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff00ff'
+							: value > 0 ? '#0000ff'
+							: value > -8 ? '#ff0000'
+							: '#00ff00';
+					},
+					radius: 10,
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/pointBackgroundColor/value.js

@@ -0,0 +1,42 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					pointBackgroundColor: '#ff0000'
+				},
+				{
+					// option in element (fallback)
+					data: [4, -5, -10, null, 10, 5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					fill: false,
+				},
+				point: {
+					backgroundColor: '#00ff00',
+					radius: 10,
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/pointBorderColor/scriptable.js

@@ -0,0 +1,61 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					pointBorderColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff0000'
+							: value > 0 ? '#00ff00'
+							: value > -8 ? '#0000ff'
+							: '#ff00ff';
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [4, -5, -10, null, 10, 5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					fill: false,
+				},
+				point: {
+					borderColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff00ff'
+							: value > 0 ? '#0000ff'
+							: value > -8 ? '#ff0000'
+							: '#00ff00';
+					},
+					radius: 10,
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/pointBorderColor/value.js

@@ -0,0 +1,42 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					pointBorderColor: '#ff0000'
+				},
+				{
+					// option in element (fallback)
+					data: [4, -5, -10, null, 10, 5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					fill: false,
+				},
+				point: {
+					borderColor: '#00ff00',
+					radius: 10,
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/pointBorderWidth/scriptable.js

@@ -0,0 +1,61 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					pointBorderColor: '#0000ff',
+					pointBorderWidth: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 4 ? 10
+							: value > -4 ? 5
+							: 2;
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [4, -5, -10, null, 10, 5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					fill: false,
+				},
+				point: {
+					borderColor: '#ff0000',
+					borderWidth: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 4 ? 2
+							: value > -4 ? 5
+							: 10;
+					},
+					radius: 10,
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.line/pointBorderWidth/value.js

@@ -0,0 +1,44 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					pointBorderColor: '#0000ff',
+					pointBorderWidth: 6
+				},
+				{
+					// option in element (fallback)
+					data: [4, -5, -10, null, 10, 5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					fill: false,
+				},
+				point: {
+					borderColor: '#00ff00',
+					borderWidth: 3,
+					radius: 10,
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/specs/core.controller.tests.js

@@ -65,12 +65,12 @@ describe('Chart', function() {
 
 		it('should initialize config with default options', function() {
 			var callback = function() {};
-
 			var defaults = Chart.defaults;
+
 			defaults.global.responsiveAnimationDuration = 42;
 			defaults.global.hover.onHover = callback;
-			defaults.line.hover.mode = 'x-axis';
 			defaults.line.spanGaps = true;
+			defaults.line.hover.mode = 'x-axis';
 
 			var chart = acquireChart({
 				type: 'line'
@@ -83,10 +83,16 @@ describe('Chart', function() {
 			expect(options.responsiveAnimationDuration).toBe(42);
 			expect(options.hover.onHover).toBe(callback);
 			expect(options.hover.mode).toBe('x-axis');
+
+			defaults.global.responsiveAnimationDuration = 0;
+			defaults.global.hover.onHover = null;
+			defaults.line.spanGaps = false;
+			defaults.line.hover.mode = 'label';
 		});
 
 		it('should override default options', function() {
 			var defaults = Chart.defaults;
+
 			defaults.global.responsiveAnimationDuration = 42;
 			defaults.line.hover.mode = 'x-axis';
 			defaults.line.spanGaps = true;
@@ -110,6 +116,10 @@ describe('Chart', function() {
 			expect(options.spanGaps).toBe(false);
 			expect(options.hover.mode).toBe('dataset');
 			expect(options.title.position).toBe('bottom');
+
+			defaults.global.responsiveAnimationDuration = 0;
+			defaults.line.hover.mode = 'label';
+			defaults.line.spanGaps = false;
 		});
 
 		it('should override axis positions that are incorrect', function() {

test/specs/plugin.filler.tests.js

@@ -136,7 +136,6 @@ describe('Plugin.filler', function() {
 						{fill: null},
 						{fill: []},
 						{fill: {}},
-						{fill: function() {}}
 					]
 				}
 			});
@@ -155,7 +154,6 @@ describe('Plugin.filler', function() {
 				false, // null
 				false, // array
 				false, // object
-				false, // function
 			]);
 		});
 	});