Float-bar support. The logic is to use array values [bottomY, topY] i…

docs/charts/bar.md

@@ -16,7 +16,7 @@ A bar chart provides a way of showing data values represented as vertical bars.
         ],
         "datasets": [{
             "label": "My First Dataset",
-            "data": [65, 59, 80, 81, 56, 55, 40],
+            "data": [65, 59, 80, 81, 56, 55, 40, [10, 20]],
             "fill": false,
             "backgroundColor": [
                 "rgba(255, 99, 132, 0.2)",
@@ -86,6 +86,7 @@ Options are:
 * 'left'
 * 'top'
 * 'right'
+* false - in the case of floating bar chart we need to have all borders, so you can set var to false to draw all borders
 
 ## Configuration Options
 
@@ -146,10 +147,10 @@ Sample:     |==============|
 
 ## Data Structure
 
-The `data` property of a dataset for a bar chart is specified as a an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.
-
+The `data` property of a dataset for a bar chart is specified as a an array of numbers or arrays. Each point in the data array corresponds to the label at the same index on the x axis.
+For floating bar chart you can use array for a specific Y value passing two numbers. First one will be used as min value and second one as max value for a bar.
 ```javascript
-data: [20, 10]
+data: [20, 10, [10, 20]]
 ```
 
 You can also specify the dataset as x/y coordinates when using the [time scale](../axes/cartesian/time.md#time-cartesian-axis).
@@ -196,7 +197,7 @@ A horizontal bar chart is a variation on a vertical bar chart. It is sometimes u
         "labels": ["January", "February", "March", "April", "May", "June", "July"],
         "datasets": [{
             "label": "My First Dataset",
-            "data": [65, 59, 80, 81, 56, 55, 40],
+            "data": [65, 59, 80, 81, 56, 55, 40, [10, 20]],
             "fill": false,
             "backgroundColor": [
                 "rgba(255, 99, 132, 0.2)",

src/controllers/controller.bar.js

@@ -87,7 +87,14 @@ defaults._set('horizontalBar', {
 
 			label: function(item, data) {
 				var datasetLabel = data.datasets[item.datasetIndex].label || '';
-				return datasetLabel + ': ' + item.xLabel;
+				//  float-bar support, if y arguments are array tooltip will show bottom and up values
+				var yValue = data.datasets[item.datasetIndex].data[item.index];
+				if (helpers.isArray(yValue)) {
+					datasetLabel += ': ' + yValue[0] + ' - ' + yValue[1];
+				} else {
+					datasetLabel += ': ' + item.xLabel;
+				}
+				return datasetLabel;
 			}
 		},
 		mode: 'index',
@@ -219,6 +226,11 @@ module.exports = function(Chart) {
 			var custom = rectangle.custom || {};
 			var rectangleOptions = chart.options.elements.rectangle;
 
+			//  float-bar support, if y arguments are array lets override rectangles styles, assigning no skippingBorder
+			if (helpers.isArray(dataset.data[index])) {
+				custom.borderSkipped = null;
+			}
+
 			rectangle._xScale = me.getScaleForId(meta.xAxisID);
 			rectangle._yScale = me.getScaleForId(meta.yAxisID);
 			rectangle._datasetIndex = me.index;
@@ -227,7 +239,7 @@ module.exports = function(Chart) {
 			rectangle._model = {
 				datasetLabel: dataset.label,
 				label: chart.data.labels[index],
-				borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleOptions.borderSkipped,
+				borderSkipped: custom.borderSkipped || custom.borderSkipped === null ? custom.borderSkipped : rectangleOptions.borderSkipped,
 				backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, rectangleOptions.backgroundColor),
 				borderColor: custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleOptions.borderColor),
 				borderWidth: custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleOptions.borderWidth)
@@ -383,12 +395,14 @@ module.exports = function(Chart) {
 			var meta = me.getMeta();
 			var scale = me.getValueScale();
 			var datasets = chart.data.datasets;
-			var value = scale.getRightValue(datasets[datasetIndex].data[index]);
+			// float-bar support, if y arguments are array function will use top - bottom value to calculate bar height
+			var yValue = datasets[datasetIndex].data[index];
+			var value = helpers.isArray(yValue) ? (scale.getRightValue(yValue[1]) - scale.getRightValue(yValue[0])) : scale.getRightValue(yValue);
 			var stacked = scale.options.stacked;
 			var stack = meta.stack;
-			var start = 0;
+			// float-bar support, if y arguments are array function will use bottom value as bar start point
+			var start = helpers.isArray(yValue) ? yValue[0] : 0;
 			var i, imeta, ivalue, base, head, size;
-
 			if (stacked || (stacked === undefined && stack !== undefined)) {
 				for (i = 0; i < datasetIndex; ++i) {
 					imeta = chart.getDatasetMeta(i);
@@ -397,7 +411,6 @@ module.exports = function(Chart) {
 						imeta.stack === stack &&
 						imeta.controller.getValueScaleId() === scale.id &&
 						chart.isDatasetVisible(i)) {
-
 						ivalue = scale.getRightValue(datasets[i].data[index]);
 						if ((value < 0 && ivalue < 0) || (value >= 0 && ivalue > 0)) {
 							start += ivalue;
@@ -453,8 +466,14 @@ module.exports = function(Chart) {
 
 			helpers.canvas.clipArea(chart.ctx, chart.chartArea);
 
+			//  float-bar support, if y arguments are array function will use bottom value as bar start point
 			for (; i < ilen; ++i) {
-				if (!isNaN(scale.getRightValue(dataset.data[i]))) {
+				var yValue = dataset.data[i];
+				if (helpers.isArray(yValue)) {
+					if (!isNaN(scale.getRightValue(yValue[1])) && !isNaN(scale.getRightValue(yValue[0]))) {
+						rects[i].draw();
+					}
+				} else if (!isNaN(scale.getRightValue(yValue))) {
 					rects[i].draw();
 				}
 			}

src/core/core.scale.js

@@ -514,6 +514,10 @@ module.exports = Element.extend({
 
 	// Get the correct value. NaN bad inputs, If the value type is object get the x or y based on whether we are horizontal or not
 	getRightValue: function(rawValue) {
+		// Float-bar support. Check if array so be aware of min/max Y values.
+		if (helpers.isArray(rawValue)) {
+			rawValue = rawValue[1];
+		}
 		// Null and undefined values first
 		if (helpers.isNullOrUndef(rawValue)) {
 			return NaN;

src/core/core.tooltip.js

@@ -68,7 +68,13 @@ defaults._set('global', {
 				if (label) {
 					label += ': ';
 				}
-				label += tooltipItem.yLabel;
+				//	float-bar support, if y arguments are array tooltip will show bottom and up values
+				var yValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+				if (helpers.isArray(yValue)) {
+					label += yValue[0] + ' - ' + yValue[1];
+				} else {
+					label += tooltipItem.yLabel;
+				}
 				return label;
 			},
 			labelColor: function(tooltipItem, chart) {

src/elements/element.rectangle.js

@@ -67,7 +67,12 @@ module.exports = Element.extend({
 			bottom = vm.base;
 			signX = 1;
 			signY = bottom > top ? 1 : -1;
-			borderSkipped = vm.borderSkipped || 'bottom';
+			// no border support
+			if (vm.borderSkipped === null) {
+				borderSkipped = null;
+			} else {
+				borderSkipped = vm.borderSkipped || 'bottom';
+			}
 		} else {
 			// horizontal bar
 			left = vm.base;
@@ -76,7 +81,12 @@ module.exports = Element.extend({
 			bottom = vm.y + vm.height / 2;
 			signX = right > left ? 1 : -1;
 			signY = 1;
-			borderSkipped = vm.borderSkipped || 'left';
+			// no border support
+			if (vm.borderSkipped === null) {
+				borderSkipped = null;
+			} else {
+				borderSkipped = vm.borderSkipped || 'left';
+			}
 		}
 
 		// Canvas doesn't allow us to stroke inside the width so we can
@@ -132,8 +142,10 @@ module.exports = Element.extend({
 		// Draw rectangle from 'startCorner'
 		var corner = cornerAt(0);
 		ctx.moveTo(corner[0], corner[1]);
+		//	float-bar support, let's rectangle allow to have all borders, assign corners_count to 5 instead of 4, so we are allowing to fill all sides.
+		var cornersCount = borderSkipped === null ? 4 : 3;
 
-		for (var i = 1; i < 4; i++) {
+		for (var i = 1; i <= cornersCount; i++) {
 			corner = cornerAt(i);
 			ctx.lineTo(corner[0], corner[1]);
 		}

src/scales/scale.logarithmic.js

@@ -161,7 +161,6 @@ module.exports = function(Chart) {
 							} else if (value > me.max) {
 								me.max = value;
 							}
-
 							if (value !== 0 && (me.minNotZero === null || value < me.minNotZero)) {
 								me.minNotZero = value;
 							}