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

docs/charts/bar.md

@@ -6,17 +6,17 @@ A bar chart provides a way of showing data values represented as vertical bars.
     "type": "bar",
     "data": {
         "labels": [
-            "January",
-            "February",
-            "March",
-            "April",
-            "May",
-            "June",
+            "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)",
@@ -86,6 +86,7 @@ Options are:
 * 'left'
 * 'top'
 * 'right'
+* 'none' - in the case of floating bar chart we need to have all borders, so you can pass 'none' 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 lowY and second one as highY.
 ```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])) {
+				rectangleOptions.borderSkipped = 'none';
+			}
+
 			rectangle._xScale = me.getScaleForId(meta.xAxisID);
 			rectangle._yScale = me.getScaleForId(meta.yAxisID);
 			rectangle._datasetIndex = me.index;
@@ -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);
@@ -453,8 +467,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.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

@@ -132,8 +132,14 @@ 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 = 4;
 
-		for (var i = 1; i < 4; i++) {
+		if (borderSkipped === 'none') {
+			cornersCount = 5;
+		}
+
+		for (var i = 1; i < cornersCount; i++) {
 			corner = cornerAt(i);
 			ctx.lineTo(corner[0], corner[1]);
 		}

src/scales/scale.linear.js

@@ -105,7 +105,14 @@ module.exports = function(Chart) {
 					var meta = chart.getDatasetMeta(datasetIndex);
 					if (chart.isDatasetVisible(datasetIndex) && IDMatches(meta)) {
 						helpers.each(dataset.data, function(rawValue, index) {
-							var value = +me.getRightValue(rawValue);
+							//	float-bar support, if y arguments are array scales will check Y value for min&max values
+							var value = 0;
+							if (helpers.isArray(rawValue)) {
+								value = +me.getRightValue(rawValue[1]);
+							} else {
+								value = +me.getRightValue(rawValue);
+							}
+
 							if (isNaN(value) || meta.data[index].hidden) {
 								return;
 							}