Make line options scriptable (chartjs#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,
-				},
-				point: {
 					borderColor: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 8 ? '#ff00ff'
-							: value > 0 ? '#0000ff'
-							: value > -8 ? '#ff0000'
-							: '#00ff00';
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index === 0 ? '#ff0000'
+							: index === 1 ? '#00ff00'
+							: '#0000ff';
 					},
-					radius: 10,
+					borderWidth: 10,
+					fill: false
+				},
+				point: {
+					borderColor: '#ff0000',
+					borderWidth: 10,
+					radius: 16
 				}
 			},
+			layout: {
+				padding: 32
+			},
 			scales: {
 				xAxes: [{display: false}],
 				yAxes: [