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.
 
@@ -112,6 +112,13 @@ Options are:
 * `'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 are skipped.
+
+**Note:** for negative bars in vertical chart, `top` and `bottom` are flipped. Same goes for `left` and `right` in horizontal chart.
 
 ### 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: {
@@ -54,12 +56,104 @@ function getBarBounds(bar) {
 	};
 }
 
+function drawLines(ctx, lines) {
+	var i = 0;
+	var ilen = lines.length;
+	var line, prevLine;
+
+	for (; i < ilen; ++i) {
+		line = lines[i];
+		if (i === 0 || prevLine.w !== line.w) {
+			if (i > 0) {
+				ctx.stroke();
+			}
+			ctx.beginPath();
+			ctx.lineWidth = line.w;
+		}
+		if (i === 0 || prevLine.x2 !== line.x1 || prevLine.y2 !== line.y1) {
+			ctx.moveTo(line.x1, line.y1);
+		}
+		ctx.lineTo(line.x2, line.y2);
+		prevLine = line;
+	}
+	if (ilen) {
+		ctx.stroke();
+	}
+}
+
+// eslint-disable-next-line complexity
+function buildBorderLines(rect, width, offset) {
+	var lines = [];
+	var halfOffsetLeft = offset.left / 2;
+	var halfOffsetRight = offset.right / 2;
+	var halfOffsetTop = offset.top / 2;
+	var halfOffsetBottom = offset.bottom / 2;
+
+	if (width.bottom) {
+		lines.push({
+			w: width.bottom,
+			x1: rect.right,
+			y1: rect.bottom + halfOffsetBottom,
+			x2: rect.left + (width.bottom === width.left ? halfOffsetLeft : offset.left),
+			y2: rect.bottom + halfOffsetBottom
+		});
+	}
+	if (width.left) {
+		lines.push({
+			w: width.left,
+			x1: rect.left + halfOffsetLeft,
+			y1: rect.bottom + (width.bottom === width.left ? halfOffsetBottom : 0),
+			x2: rect.left + halfOffsetLeft,
+			y2: rect.top + (width.left === width.top ? halfOffsetTop : offset.top)
+		});
+	}
+	if (width.top) {
+		lines.push({
+			w: width.top,
+			x1: rect.left + (width.left === width.top ? halfOffsetLeft : 0),
+			y1: rect.top + halfOffsetTop,
+			x2: rect.right + (width.top === width.right ? halfOffsetRight : offset.right),
+			y2: rect.top + halfOffsetTop
+		});
+	}
+	if (width.right) {
+		lines.push({
+			w: width.right,
+			x1: rect.right + halfOffsetRight,
+			y1: rect.top + (width.top === width.right ? halfOffsetTop : 0),
+			x2: rect.right + halfOffsetRight,
+			y2: rect.bottom + offset.bottom
+		});
+	}
+	return lines;
+}
+
+function parseBorderWidth(borderWidth, borderSkipped, maxWidth, maxHeight) {
+	if (helpers.isObject(borderWidth)) {
+		return {
+			bottom: Math.min(borderWidth.bottom || 0, maxHeight),
+			left: Math.min(borderWidth.left || 0, maxWidth),
+			top: Math.min(borderWidth.top || 0, maxHeight),
+			right: Math.min(borderWidth.right || 0, maxWidth)
+		};
+	}
+
+	maxWidth = Math.min(borderWidth, maxWidth);
+	maxHeight = Math.min(borderWidth, maxHeight);
+	return {
+		bottom: borderSkipped === 'bottom' ? 0 : maxHeight,
+		left: borderSkipped === 'left' ? 0 : maxWidth,
+		top: borderSkipped === 'top' ? 0 : maxHeight,
+		right: borderSkipped === 'right' ? 0 : maxWidth
+	};
+}
+
 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;
+		var left, right, top, bottom, signX, signY, borderSkipped, offset;
 
 		if (!vm.horizontal) {
 			// bar
@@ -69,7 +163,7 @@ module.exports = Element.extend({
 			bottom = vm.base;
 			signX = 1;
 			signY = bottom > top ? 1 : -1;
-			borderSkipped = vm.borderSkipped || 'bottom';
+			borderSkipped = valueOrDefault(vm.borderSkipped, 'bottom') || '';
 		} else {
 			// horizontal bar
 			left = vm.base;
@@ -78,72 +172,44 @@ module.exports = Element.extend({
 			bottom = vm.y + vm.height / 2;
 			signX = right > left ? 1 : -1;
 			signY = 1;
-			borderSkipped = vm.borderSkipped || 'left';
+			borderSkipped = valueOrDefault(vm.borderSkipped, 'left') || '';
 		}
 
-		// 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;
-			}
-		}
-
-		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, bottom, right - left, top - bottom);
+			return;
 		}
 
-		// Draw rectangle from 'startCorner'
-		var corner = cornerAt(0);
-		ctx.moveTo(corner[0], corner[1]);
-
-		for (var i = 1; i < 4; i++) {
-			corner = cornerAt(i);
-			ctx.lineTo(corner[0], corner[1]);
-		}
+		borderWidth = parseBorderWidth(
+			borderWidth,
+			borderSkipped,
+			Math.abs(left - right) / 2,
+			Math.abs(top - bottom) / 2);
+
+		offset = {
+			left: borderWidth.left * signX,
+			right: borderWidth.right * -signX,
+			top: borderWidth.top * signY,
+			bottom: borderWidth.bottom * -signY,
+		};
 
-		ctx.fill();
-		if (borderWidth) {
-			ctx.stroke();
-		}
+		ctx.fillRect(
+			left + offset.left,
+			bottom + offset.bottom,
+			right + offset.right - left - offset.left,
+			top + offset.top - bottom - offset.bottom);
+
+		drawLines(ctx,
+			buildBorderLines({
+				left: left,
+				top: top,
+				right: right,
+				bottom: bottom
+			}, borderWidth, offset)
+		);
 	},
 
 	height: function() {