chartjs · etimberg · Nov 12, 2019 · Nov 6, 2019 · Nov 6, 2019 · Nov 6, 2019
diff --git a/docs/axes/styling.md b/docs/axes/styling.md
@@ -10,10 +10,10 @@ The grid line configuration is nested under the scale configuration in the `grid
 | ---- | ---- | ------- | -----------
 | `display` | `boolean` | `true` | If false, do not display grid lines for this axis.
 | `circular` | `boolean` | `false` | If true, gridlines are circular (on radar chart only).
-| `color` | <code>Color&#124;Color[]</code> | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
+| `color` | <code>Color&#124;Color[]&#124;function</code> | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
 | `borderDash` | `number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `borderDashOffset` | `number` | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
-| `lineWidth` | <code>number&#124;number[]</code> | `1` | Stroke width of grid lines.
+| `borderDashOffset` | <code>number&#124;function</code> | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
+| `lineWidth` | <code>number&#124;number[]&#124;function</code> | `1` | Stroke width of grid lines.
 | `drawBorder` | `boolean` | `true` | If true, draw border at the edge between the axis and the chart area.
 | `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/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md
@@ -26,7 +26,7 @@ Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`.
 ### Customizability
 
 * `custom` attribute of elements was removed. Please use scriptable options
-* The `zeroLine*` options of axes were removed.
+* The `zeroLine*` options of axes were removed. Use scriptable scale options instead.
 * The `hover` property of scriptable options `context` object was renamed to `active` to align it with the datalabels plugin.
 
 ### Options

diff --git a/samples/samples.js b/samples/samples.js
@@ -127,6 +127,9 @@
 		}, {
 			title: 'Grid lines style',
 			path: 'scales/gridlines-style.html'
+		}, {
+			title: 'Scriptable Grid lines',
+			path: 'scales/gridlines-scriptable.html'
 		}, {
 			title: 'Multiline labels',
 			path: 'scales/multiline-labels.html'

diff --git a/samples/scales/gridlines-scriptable.html b/samples/scales/gridlines-scriptable.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>Grid Lines Scriptable Settings</title>
+	<script src="../../dist/Chart.min.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+	canvas{
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
+</head>
+
+<body>
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'My First dataset',
+					backgroundColor: window.chartColors.red,
+					borderColor: window.chartColors.red,
+					data: [10, 30, 39, 20, 25, 34, -10],
+					fill: false,
+				}, {
+					label: 'My Second dataset',
+					fill: false,
+					backgroundColor: window.chartColors.blue,
+					borderColor: window.chartColors.blue,
+					data: [18, 33, 22, 19, 11, -39, 30],
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Grid Line Settings'
+				},
+				scales: {
+					yAxes: [{
+						gridLines: {
+							drawBorder: false,
+							color: function(context) {
+								if (context.tick.value > 0) {
+									return window.chartColors.green;
+								} else if (context.tick.value < 0) {
+									return window.chartColors.red;
+								}
+
+								return '#000000';
+							},
+						},
+					}]
+				}
+			}
+		};
+
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
+</body>
+
+</html>
diff --git a/src/core/core.scale.js b/src/core/core.scale.js
@@ -8,7 +8,7 @@ const Ticks = require('./core.ticks');
 const isArray = helpers.isArray;
 const isNullOrUndef = helpers.isNullOrUndef;
 const valueOrDefault = helpers.valueOrDefault;
-const valueAtIndexOrDefault = helpers.valueAtIndexOrDefault;
+const resolve = helpers.options.resolve;
 
 defaults._set('scale', {
 	display: true,
@@ -199,7 +199,7 @@ function parseFontOptions(options, nestedOpts) {
 		fontStyle: valueOrDefault(nestedOpts.fontStyle, options.fontStyle),
 		lineHeight: valueOrDefault(nestedOpts.lineHeight, options.lineHeight)
 	}), {
-		color: helpers.options.resolve([nestedOpts.fontColor, options.fontColor, defaults.global.defaultFontColor])
+		color: resolve([nestedOpts.fontColor, options.fontColor, defaults.global.defaultFontColor])
 	});
 }
 
@@ -965,10 +965,16 @@ class Scale extends Element {
 		var isHorizontal = me.isHorizontal();
 		var ticks = me._ticksToDraw;
 		var ticksLength = ticks.length + (offsetGridLines ? 1 : 0);
+		var context;
 
 		var tl = getTickMarkLength(gridLines);
 		var items = [];
-		var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;
+
+		context = {
+			scale: me,
+			tick: ticks[0],
+		};
+		var axisWidth = gridLines.drawBorder ? resolve([gridLines.lineWidth, 0], context, 0) : 0;
 		var axisHalfWidth = axisWidth / 2;
 		var alignPixel = helpers._alignPixel;
 		var alignBorderValue = function(pixel) {
@@ -1006,10 +1012,15 @@ class Scale extends Element {
 		for (i = 0; i < ticksLength; ++i) {
 			tick = ticks[i] || {};
 
-			const lineWidth = valueAtIndexOrDefault(gridLines.lineWidth, i, 1);
-			const lineColor = valueAtIndexOrDefault(gridLines.color, i, 'rgba(0,0,0,0.1)');
+			context = {
+				scale: me,
+				tick,
+			};
+
+			const lineWidth = resolve([gridLines.lineWidth], context, i);
+			const lineColor = resolve([gridLines.color], context, i);
 			const borderDash = gridLines.borderDash || [];
-			const borderDashOffset = gridLines.borderDashOffset || 0.0;
+			const borderDashOffset = resolve([gridLines.borderDashOffset], context, i);
 
 			lineValue = getPixelForGridLine(me, tick._index || i, offsetGridLines);
 
@@ -1127,7 +1138,11 @@ class Scale extends Element {
 		var ctx = me.ctx;
 		var chart = me.chart;
 		var alignPixel = helpers._alignPixel;
-		var axisWidth = gridLines.drawBorder ? valueAtIndexOrDefault(gridLines.lineWidth, 0, 0) : 0;
+		var context = {
+			scale: me,
+			tick: me._ticksToDraw[0],
+		};
+		var axisWidth = gridLines.drawBorder ? resolve([gridLines.lineWidth, 0], context, 0) : 0;
 		var items = me._gridLineItems || (me._gridLineItems = me._computeGridLineItems(chartArea));
 		var width, color, i, ilen, item;
 
@@ -1165,7 +1180,11 @@ class Scale extends Element {
 		if (axisWidth) {
 			// Draw the line at the edge of the axis
 			var firstLineWidth = axisWidth;
-			var lastLineWidth = valueAtIndexOrDefault(gridLines.lineWidth, items.ticksLength - 1, 1);
+			context = {
+				scale: me,
+				tick: me._ticksToDraw[items.ticksLength - 1],
+			};
+			var lastLineWidth = resolve([gridLines.lineWidth, 1], context, items.ticksLength - 1);
 			var borderValue = items.borderValue;
 			var x1, x2, y1, y2;
 
@@ -1180,7 +1199,7 @@ class Scale extends Element {
 			}
 
 			ctx.lineWidth = axisWidth;
-			ctx.strokeStyle = valueAtIndexOrDefault(gridLines.color, 0);
+			ctx.strokeStyle = resolve([gridLines.color], context, 0);
 			ctx.beginPath();
 			ctx.moveTo(x1, y1);
 			ctx.lineTo(x2, y2);