diff --git a/samples/bar.html b/samples/bar.html index 493bd9965..d1bf880c6 100644 --- a/samples/bar.html +++ b/samples/bar.html @@ -1,6 +1,5 @@ - Bar Chart @@ -13,8 +12,8 @@ - diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js index 1a6ec688f..a65331f30 100644 --- a/src/Chart.Bar.js +++ b/src/Chart.Bar.js @@ -110,7 +110,7 @@ helpers.extend(bar, { width : this.scale.calculateBarWidth(this.data.datasets.length), x: this.scale.calculateBarX(this.data.datasets.length, datasetIndex, index), - y: this.scale.endPoint, + y: this.calculateBarBase(), }); // Copy to view model bar.save(); @@ -175,6 +175,26 @@ //this.showTooltip(active); }, + // Calculate the base point for the bar. + // If the scale has a 0 point, use that as the base + // If the scale min and max are both positive, use the bottom as a base + // If the scale min and max are both negative, use the top as a base + calculateBarBase: function() { + var base = this.scale.endPoint; + + if (this.scale.beginAtZero || ((this.scale.min <= 0 && this.scale.max >= 0) || (this.scale.min >= 0 && this.scale.max <= 0))) + { + base = this.scale.calculateY(0); + base += this.options.scaleGridLineWidth; + } + else if (this.scale.min < 0 && this.scale.max < 0) + { + // All values are negative. Use the top as the base + base = this.scale.startPoint; + } + + return base; + }, update : function(){ this.scale.update(); @@ -314,9 +334,9 @@ label : label, datasetLabel: this.data.datasets[datasetIndex].label, x: this.scale.calculateBarX(this.data.datasets.length, datasetIndex, this.scale.valuesCount+1), - y: this.scale.endPoint, + y: this.calculateBarBase(), width : this.scale.calculateBarWidth(this.data.datasets.length), - base : this.scale.endPoint, + base : this.calculateBarBase(), borderColor : this.data.datasets[datasetIndex].borderColor, backgroundColor : this.data.datasets[datasetIndex].backgroundColor })); @@ -336,8 +356,8 @@ }, reflow : function(){ helpers.extend(this.BarClass.prototype,{ - y: this.scale.endPoint, - base : this.scale.endPoint + y: this.calculateBarBase(), // so that we animate from the baseline + base : this.calculateBarBase() }); var newScaleProps = helpers.extend({ height : this.chart.height, @@ -356,7 +376,7 @@ this.eachBars(function(bar, index, datasetIndex){ if (bar.hasValue()){ // Update the bar basepoint - bar.base = this.scale.endPoint; + bar.base = this.calculateBarBase(); //Transition bar.transition([ 'x', diff --git a/src/Chart.Core.js b/src/Chart.Core.js index 7c051683d..8a476551b 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -1384,8 +1384,14 @@ return vm.base - vm.y; }, inRange : function(chartX,chartY){ - var vm = this._vm; - return (chartX >= vm.x - vm.width/2 && chartX <= vm.x + vm.width/2) && (chartY >= vm.y && chartY <= vm.base); + if (this.y < this.base) + { + return (chartX >= this.x - this.width/2 && chartX <= this.x + this.width/2) && (chartY >= this.y && chartY <= this.base); + } + else + { + return (chartX >= this.x - this.width / 2 && chartX <= this.x + this.width / 2) && (chartY >= this.base && chartY <= this.y); + } } });