From 6bb6e5aa4b110bf4f084747691b145a1caefb63a Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Mon, 16 May 2016 22:14:33 -0400 Subject: [PATCH 1/2] Improve tick width for vertical bars --- src/controllers/controller.bar.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 957111549..1fb4765c5 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -120,7 +120,7 @@ module.exports = function(Chart) { // Appearance base: reset ? yScalePoint : this.calculateBarBase(this.index, index), - width: this.calculateBarWidth(numBars), + width: this.calculateBarWidth(index), backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor), borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped, borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor), @@ -177,19 +177,20 @@ module.exports = function(Chart) { }, - getRuler: function() { + getRuler: function(index) { var meta = this.getMeta(); var xScale = this.getScaleForId(meta.xAxisID); var yScale = this.getScaleForId(meta.yAxisID); var datasetCount = this.getBarCount(); - var tickWidth = (function() { - var min = xScale.getPixelForTick(1) - xScale.getPixelForTick(0); - for (var i = 2; i < xScale.ticks.length; i++) { - min = Math.min(xScale.getPixelForTick(i) - xScale.getPixelForTick(i - 1), min); - } - return min; - }).call(this); + var tickWidth; + + if (xScale.options.type === 'category') { + tickWidth = xScale.getPixelForTick(index + 1) - xScale.getPixelForTick(index); + } else { + // Average width + tickWidth = xScale.width / xScale.ticks.length; + } var categoryWidth = tickWidth * xScale.options.categoryPercentage; var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2; var fullBarWidth = categoryWidth / datasetCount; @@ -213,9 +214,9 @@ module.exports = function(Chart) { }; }, - calculateBarWidth: function() { + calculateBarWidth: function(index) { var xScale = this.getScaleForId(this.getMeta().xAxisID); - var ruler = this.getRuler(); + var ruler = this.getRuler(index); return xScale.options.stacked ? ruler.categoryWidth : ruler.barWidth; }, @@ -240,7 +241,7 @@ module.exports = function(Chart) { var xScale = this.getScaleForId(meta.xAxisID); var barIndex = this.getBarIndex(datasetIndex); - var ruler = this.getRuler(); + var ruler = this.getRuler(index); var leftTick = xScale.getPixelForValue(null, index, datasetIndex, this.chart.isCombo); leftTick -= this.chart.isCombo ? (ruler.tickWidth / 2) : 0; From 45969a3903b2b46c9f42efc7293aef830b6e4db9 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Mon, 16 May 2016 22:17:45 -0400 Subject: [PATCH 2/2] Horizontal bars are similar --- src/controllers/controller.bar.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 1fb4765c5..fc7f1eb2b 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -421,7 +421,7 @@ module.exports = function(Chart) { // Appearance base: reset ? xScalePoint : this.calculateBarBase(this.index, index), - height: this.calculateBarHeight(numBars), + height: this.calculateBarHeight(index), backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor), borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped, borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor), @@ -547,19 +547,19 @@ module.exports = function(Chart) { return base; }, - getRuler: function () { + getRuler: function (index) { var meta = this.getMeta(); var xScale = this.getScaleForId(meta.xAxisID); var yScale = this.getScaleForId(meta.yAxisID); var datasetCount = this.getBarCount(); - var tickHeight = (function () { - var min = yScale.getPixelForTick(1) - yScale.getPixelForTick(0); - for (var i = 2; i < this.getDataset().data.length; i++) { - min = Math.min(yScale.getPixelForTick(i) - yScale.getPixelForTick(i - 1), min); - } - return min; - }).call(this); + var tickHeight; + if (yScale.options.type === 'category') { + tickHeight = yScale.getPixelForTick(index + 1) - yScale.getPixelForTick(index); + } else { + // Average width + tickHeight = yScale.width / yScale.ticks.length; + } var categoryHeight = tickHeight * yScale.options.categoryPercentage; var categorySpacing = (tickHeight - (tickHeight * yScale.options.categoryPercentage)) / 2; var fullBarHeight = categoryHeight / datasetCount; @@ -583,9 +583,9 @@ module.exports = function(Chart) { }; }, - calculateBarHeight: function () { + calculateBarHeight: function (index) { var yScale = this.getScaleForId(this.getMeta().yAxisID); - var ruler = this.getRuler(); + var ruler = this.getRuler(index); return yScale.options.stacked ? ruler.categoryHeight : ruler.barHeight; }, @@ -629,7 +629,7 @@ module.exports = function(Chart) { var xScale = this.getScaleForId(meta.xAxisID); var barIndex = this.getBarIndex(datasetIndex); - var ruler = this.getRuler(); + var ruler = this.getRuler(index); var topTick = yScale.getPixelForValue(null, index, datasetIndex, this.chart.isCombo); topTick -= this.chart.isCombo ? (ruler.tickHeight / 2) : 0;