Allow configuration of borderWidth as object

docs/charts/bar.md

@@ -71,7 +71,7 @@ the color of the bars is generally set this way.
 | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'bottom'`
-| [`borderWidth`](#styling) | `number` | Yes | Yes | `0`
+| [`borderWidth`](#borderwidth) | <code>number&#124;object</code> | Yes | Yes | `0`
 | [`data`](#data-structure) | `object[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined`
@@ -97,7 +97,7 @@ The style of each bar can be controlled with the following properties:
 | `backgroundColor` | The bar background color.
 | `borderColor` | The bar border color.
 | [`borderSkipped`](#borderskipped) | The edge to skip when drawing bar.
-| `borderWidth` | The bar border width (in pixels).
+| [`borderWidth`](#borderwidth) | The bar border width (in pixels).
 
 All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options.
 
@@ -107,11 +107,18 @@ This setting is used to avoid drawing the bar stroke at the base of the fill.
 In general, this does not need to be changed except when creating chart types
 that derive from a bar chart.
 
+**Note:** for negative bars in vertical chart, `top` and `bottom` are flipped. Same goes for `left` and `right` in horizontal chart.
+
 Options are:
 * `'bottom'`
 * `'left'`
 * `'top'`
 * `'right'`
+* `false`
+
+#### borderWidth
+
+If this value is a number, it is applied to all sides of the rectangle (left, top, right, bottom), except [`borderSkipped`](#borderskipped). If this value is an object, the `left` property defines the left border width. Similarly the `right`, `top` and `bottom` properties can also be specified. Omitted borders and [`borderSkipped`](#borderskipped) are skipped.
 
 ### Interactions
 

src/elements/element.rectangle.js

@@ -2,8 +2,10 @@
 
 var defaults = require('../core/core.defaults');
 var Element = require('../core/core.element');
+var helpers = require('../helpers/index');
 
 var defaultColor = defaults.global.defaultColor;
+var valueOrDefault = helpers.valueOrDefault;
 
 defaults._set('global', {
 	elements: {
@@ -28,22 +30,22 @@ function isVertical(bar) {
  */
 function getBarBounds(bar) {
 	var vm = bar._view;
-	var x1, x2, y1, y2;
+	var x1, x2, y1, y2, half;
 
 	if (isVertical(bar)) {
 		// vertical
-		var halfWidth = vm.width / 2;
-		x1 = vm.x - halfWidth;
-		x2 = vm.x + halfWidth;
+		half = vm.width / 2;
+		x1 = vm.x - half;
+		x2 = vm.x + half;
 		y1 = Math.min(vm.y, vm.base);
 		y2 = Math.max(vm.y, vm.base);
 	} else {
 		// horizontal bar
-		var halfHeight = vm.height / 2;
+		half = vm.height / 2;
 		x1 = Math.min(vm.x, vm.base);
 		x2 = Math.max(vm.x, vm.base);
-		y1 = vm.y - halfHeight;
-		y2 = vm.y + halfHeight;
+		y1 = vm.y - half;
+		y2 = vm.y + half;
 	}
 
 	return {
@@ -54,96 +56,153 @@ function getBarBounds(bar) {
 	};
 }
 
-module.exports = Element.extend({
-	draw: function() {
-		var ctx = this._chart.ctx;
-		var vm = this._view;
-		var left, right, top, bottom, signX, signY, borderSkipped;
-		var borderWidth = vm.borderWidth;
+function drawLines(ctx, lines) {
+	var i = 0;
+	var ilen = lines.length;
+	var line, prevLine;
 
-		if (!vm.horizontal) {
-			// bar
-			left = vm.x - vm.width / 2;
-			right = vm.x + vm.width / 2;
-			top = vm.y;
-			bottom = vm.base;
-			signX = 1;
-			signY = bottom > top ? 1 : -1;
-			borderSkipped = vm.borderSkipped || 'bottom';
-		} else {
-			// horizontal bar
-			left = vm.base;
-			right = vm.x;
-			top = vm.y - vm.height / 2;
-			bottom = vm.y + vm.height / 2;
-			signX = right > left ? 1 : -1;
-			signY = 1;
-			borderSkipped = vm.borderSkipped || 'left';
-		}
+	if (!ilen) {
+		return;
+	}
+
+	prevLine = lines[0];
+	ctx.beginPath();
+	ctx.lineWidth = prevLine.w;
 
-		// Canvas doesn't allow us to stroke inside the width so we can
-		// adjust the sizes to fit if we're setting a stroke on the line
-		if (borderWidth) {
-			// borderWidth shold be less than bar width and bar height.
-			var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
-			borderWidth = borderWidth > barSize ? barSize : borderWidth;
-			var halfStroke = borderWidth / 2;
-			// Adjust borderWidth when bar top position is near vm.base(zero).
-			var borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
-			var borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
-			var borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
-			var borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
-			// not become a vertical line?
-			if (borderLeft !== borderRight) {
-				top = borderTop;
-				bottom = borderBottom;
-			}
-			// not become a horizontal line?
-			if (borderTop !== borderBottom) {
-				left = borderLeft;
-				right = borderRight;
-			}
+	for (; i < ilen; ++i) {
+		line = lines[i];
+		if (prevLine.w !== line.w) {
+			ctx.stroke();
+			ctx.beginPath();
+			ctx.lineWidth = line.w;
 		}
+		if (prevLine.x2 !== line.x1 || prevLine.y2 !== line.y1) {
+			ctx.moveTo(line.x1, line.y1);
+		}
+		ctx.lineTo(line.x2, line.y2);
+		prevLine = line;
+	}
+	ctx.stroke();
+}
+
+// eslint-disable-next-line complexity
+function buildBorderLines(rect, width) {
+	var lines = [];
+	var halfLeft = width.left / 2;
+	var halfRight = width.right / 2;
+	var halfTop = width.top / 2;
+	var halfBottom = width.bottom / 2;
+
+	if (width.bottom) {
+		lines.push({
+			w: width.bottom,
+			x1: rect.right,
+			y1: rect.bottom - halfBottom,
+			x2: rect.left + (width.bottom === width.left ? halfLeft : width.left),
+			y2: rect.bottom - halfBottom
+		});
+	}
+	if (width.left) {
+		lines.push({
+			w: width.left,
+			x1: rect.left + halfLeft,
+			y1: rect.bottom - (width.bottom === width.left ? halfBottom : 0),
+			x2: rect.left + halfLeft,
+			y2: rect.top + (width.left === width.top ? halfTop : width.top)
+		});
+	}
+	if (width.top) {
+		lines.push({
+			w: width.top,
+			x1: rect.left + (width.left === width.top ? halfLeft : 0),
+			y1: rect.top + halfTop,
+			x2: rect.right - (width.top === width.right ? halfRight : width.right),
+			y2: rect.top + halfTop
+		});
+	}
+	if (width.right) {
+		lines.push({
+			w: width.right,
+			x1: rect.right - halfRight,
+			y1: rect.top + (width.top === width.right ? halfTop : 0),
+			x2: rect.right - halfRight,
+			y2: rect.bottom - width.bottom
+		});
+	}
+	return lines;
+}
+
+function parseBorderWidth(value, skipped, maxWidth, maxHeight) {
+	var t, r, b, l;
+
+	if (helpers.isObject(value)) {
+		t = +value.top || 0;
+		r = +value.right || 0;
+		b = +value.bottom || 0;
+		l = +value.left || 0;
+	} else {
+		t = r = b = l = +value || 0;
+	}
+
+	return {
+		top: Math.min(maxHeight, skipped === 'top' ? 0 : t),
+		right: Math.min(maxWidth, skipped === 'right' ? 0 : r),
+		bottom: Math.min(maxHeight, skipped === 'bottom' ? 0 : b),
+		left: Math.min(maxWidth, skipped === 'left' ? 0 : l)
+	};
+}
+
+function flip(orig, v1, v2) {
+	return orig === v1 ? v2 : orig === v2 ? v1 : orig;
+}
+
+function parseBorderSkipped(bar) {
+	var vm = bar._view;
+	var vertical = isVertical(bar);
+	var borderSkipped = valueOrDefault(vm.borderSkipped, vertical ? 'bottom' : 'left');
+
+	if (vertical && vm.base < vm.y) {
+		borderSkipped = flip(borderSkipped, 'bottom', 'top');
+	}
+	if (!vertical && vm.base > vm.x) {
+		borderSkipped = flip(borderSkipped, 'left', 'right');
+	}
+	return borderSkipped;
+}
+
+module.exports = Element.extend({
+	draw: function() {
+		var me = this;
+		var ctx = me._chart.ctx;
+		var vm = me._view;
+		var borderWidth = vm.borderWidth;
+		var bounds = getBarBounds(me);
+		var left = bounds.left;
+		var top = bounds.top;
+		var width = bounds.right - left;
+		var height = bounds.bottom - top;
 
-		ctx.beginPath();
 		ctx.fillStyle = vm.backgroundColor;
 		ctx.strokeStyle = vm.borderColor;
-		ctx.lineWidth = borderWidth;
-
-		// Corner points, from bottom-left to bottom-right clockwise
-		// | 1 2 |
-		// | 0 3 |
-		var corners = [
-			[left, bottom],
-			[left, top],
-			[right, top],
-			[right, bottom]
-		];
-
-		// Find first (starting) corner with fallback to 'bottom'
-		var borders = ['bottom', 'left', 'top', 'right'];
-		var startCorner = borders.indexOf(borderSkipped, 0);
-		if (startCorner === -1) {
-			startCorner = 0;
-		}
 
-		function cornerAt(index) {
-			return corners[(startCorner + index) % 4];
+		if (!borderWidth) {
+			ctx.fillRect(left, top, width, height);
+			return;
 		}
 
-		// Draw rectangle from 'startCorner'
-		var corner = cornerAt(0);
-		ctx.moveTo(corner[0], corner[1]);
+		borderWidth = parseBorderWidth(
+			borderWidth,
+			parseBorderSkipped(me),
+			width / 2,
+			height / 2);
 
-		for (var i = 1; i < 4; i++) {
-			corner = cornerAt(i);
-			ctx.lineTo(corner[0], corner[1]);
-		}
+		ctx.fillRect(
+			left + borderWidth.left,
+			top + borderWidth.top,
+			width - borderWidth.left - borderWidth.right,
+			height - borderWidth.top - borderWidth.bottom);
 
-		ctx.fill();
-		if (borderWidth) {
-			ctx.stroke();
-		}
+		drawLines(ctx, buildBorderLines(bounds, borderWidth));
 	},
 
 	height: function() {

test/fixtures/controller.bar/borderSkipped/value.js

@@ -22,6 +22,11 @@ module.exports = {
 				{
 					// option in element (fallback)
 					data: [0, 5, -10, null],
+				},
+				{
+					// option in dataset
+					data: [0, 5, -10, null],
+					borderSkipped: false
 				}
 			]
 		},

test/fixtures/controller.bar/borderWidth/indexable-object.js

@@ -0,0 +1,56 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderSkipped: false,
+					borderWidth: [
+						{},
+						{bottom: 1, left: 1, top: 1, right: 1},
+						{bottom: 1, left: 2, top: 1, right: 2},
+						{bottom: 1, left: 3, top: 1, right: 3},
+						{bottom: 1, left: 4, top: 1, right: 4},
+						{bottom: 1, left: 5, top: 1, right: 5}
+					]
+				},
+				{
+					// option in element (fallback)
+					data: [0, 5, 10, null, -10, -5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: 'transparent',
+					borderColor: '#80808080',
+					borderSkipped: false,
+					borderWidth: [
+						{bottom: 1, left: 5, top: 1, right: 5},
+						{bottom: 1, left: 4, top: 1, right: 4},
+						{bottom: 1, left: 3, top: 1, right: 3},
+						{bottom: 1, left: 2, top: 1, right: 2},
+						{bottom: 1, left: 1, top: 1, right: 1},
+						{}
+					]
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};