From 957ac3e6773895eb7c808ac982f4da6d05b938eb Mon Sep 17 00:00:00 2001 From: Catalin Pintea Date: Mon, 27 Feb 2017 12:44:21 +0200 Subject: [PATCH 1/5] Added a `maxBarThickness` setting for bar charts xAxis --- docs/04-Bar-Chart.md | 1 + src/controllers/controller.bar.js | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/04-Bar-Chart.md b/docs/04-Bar-Chart.md index ef2cd3c19a6..2356b2d2782 100644 --- a/docs/04-Bar-Chart.md +++ b/docs/04-Bar-Chart.md @@ -101,6 +101,7 @@ display | Boolean | true | If true, show the scale. id | String | "x-axis-0" | Id of the axis so that data can bind to it stacked | Boolean | false | If true, bars are stacked on the x-axis barThickness | Number | | Manually set width of each bar in pixels. If not set, the bars are sized automatically. +maxBarThickness | Number | | Set this to ensure that the automatically sized bars are not sized thicker than this. Only works if barThickness is not set (automatic sizing is enabled). categoryPercentage | Number | 0.8 | Percent (0-1) of the available width (the space between the gridlines for small datasets) for each data-point to use for the bars. [Read More](#bar-chart-barpercentage-vs-categorypercentage) barPercentage | Number | 0.9 | Percent (0-1) of the available width each bar should be within the category percentage. 1.0 will take the whole category width and put the bars right next to each other. [Read More](#bar-chart-barpercentage-vs-categorypercentage) gridLines | Object | [See Scales](#scales) | diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 3863b3ca5c3..0c46810b76e 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -166,10 +166,20 @@ module.exports = function(Chart) { var me = this; var meta = me.getMeta(); var xScale = me.getScaleForId(meta.xAxisID); + var maxBarThickness = xScale.options.maxBarThickness; + var barWidth; + if (xScale.options.barThickness) { return xScale.options.barThickness; } - return xScale.options.stacked ? ruler.categoryWidth * xScale.options.barPercentage : ruler.barWidth; + + barWidth = xScale.options.stacked ? ruler.categoryWidth * xScale.options.barPercentage : ruler.barWidth; + + if (maxBarThickness && (barWidth > maxBarThickness)) { + return maxBarThickness; + } + + return barWidth; }, // Get stack index from the given dataset index accounting for stacks and the fact that not all bars are visible From 7c78284b5f5d0b56d6255ade7302bae53daeb38e Mon Sep 17 00:00:00 2001 From: Catalin Pintea Date: Mon, 27 Feb 2017 13:01:36 +0200 Subject: [PATCH 2/5] Fixed trailing spaces --- src/controllers/controller.bar.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 0c46810b76e..f08c30a9a8c 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -168,17 +168,13 @@ module.exports = function(Chart) { var xScale = me.getScaleForId(meta.xAxisID); var maxBarThickness = xScale.options.maxBarThickness; var barWidth; - if (xScale.options.barThickness) { return xScale.options.barThickness; } - barWidth = xScale.options.stacked ? ruler.categoryWidth * xScale.options.barPercentage : ruler.barWidth; - if (maxBarThickness && (barWidth > maxBarThickness)) { return maxBarThickness; } - return barWidth; }, From 9db4950b30a00d694c99fbd5e2bcb6b9e8842cc1 Mon Sep 17 00:00:00 2001 From: Catalin Pintea Date: Mon, 27 Feb 2017 17:32:15 +0200 Subject: [PATCH 3/5] Cleaner width check & add some spaces for readability --- src/controllers/controller.bar.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index f08c30a9a8c..d112d3c4fc0 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -168,14 +168,13 @@ module.exports = function(Chart) { var xScale = me.getScaleForId(meta.xAxisID); var maxBarThickness = xScale.options.maxBarThickness; var barWidth; + if (xScale.options.barThickness) { return xScale.options.barThickness; } + barWidth = xScale.options.stacked ? ruler.categoryWidth * xScale.options.barPercentage : ruler.barWidth; - if (maxBarThickness && (barWidth > maxBarThickness)) { - return maxBarThickness; - } - return barWidth; + return Math.min(barWidth, maxBarThickness || Infinity); }, // Get stack index from the given dataset index accounting for stacks and the fact that not all bars are visible From 096563c7829f9a6b50a81fbfc4b28d6ae6e2c104 Mon Sep 17 00:00:00 2001 From: Catalin Pintea Date: Tue, 28 Feb 2017 11:12:12 +0200 Subject: [PATCH 4/5] Moved || Infinity & cached options --- src/controllers/controller.bar.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index d112d3c4fc0..eb359bf977e 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -166,15 +166,16 @@ module.exports = function(Chart) { var me = this; var meta = me.getMeta(); var xScale = me.getScaleForId(meta.xAxisID); - var maxBarThickness = xScale.options.maxBarThickness; + var options = xScale.options; + var maxBarThickness = options.maxBarThickness || Infinity; var barWidth; - if (xScale.options.barThickness) { - return xScale.options.barThickness; + if (options.barThickness) { + return options.barThickness; } - barWidth = xScale.options.stacked ? ruler.categoryWidth * xScale.options.barPercentage : ruler.barWidth; - return Math.min(barWidth, maxBarThickness || Infinity); + barWidth = options.stacked ? ruler.categoryWidth * options.barPercentage : ruler.barWidth; + return Math.min(barWidth, maxBarThickness); }, // Get stack index from the given dataset index accounting for stacks and the fact that not all bars are visible From 878d63ca05b10ef09f02c18d30103fd0bece5db0 Mon Sep 17 00:00:00 2001 From: Catalin Pintea Date: Tue, 28 Feb 2017 11:19:35 +0200 Subject: [PATCH 5/5] Added `maxBarThickness` to horizontal bars as well --- docs/04-Bar-Chart.md | 1 + src/controllers/controller.bar.js | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/04-Bar-Chart.md b/docs/04-Bar-Chart.md index 2356b2d2782..abf83074615 100644 --- a/docs/04-Bar-Chart.md +++ b/docs/04-Bar-Chart.md @@ -114,6 +114,7 @@ display | Boolean | true | If true, show the scale. id | String | "y-axis-0" | Id of the axis so that data can bind to it. stacked | Boolean | false | If true, bars are stacked on the y-axis barThickness | Number | | Manually set height of each bar in pixels. If not set, the bars are sized automatically. +maxBarThickness | Number | | Set this to ensure that the automatically sized bars are not sized thicker than this. Only works if barThickness is not set (automatic sizing is enabled). You can override these for your `Chart` instance by passing a second argument into the `Bar` method as an object with the keys you want to override. diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index eb359bf977e..8f7ba3fa2b5 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -471,10 +471,16 @@ module.exports = function(Chart) { var me = this; var meta = me.getMeta(); var yScale = me.getScaleForId(meta.yAxisID); - if (yScale.options.barThickness) { - return yScale.options.barThickness; + var options = yScale.options; + var maxBarThickness = options.maxBarThickness || Infinity; + var barHeight; + + if (options.barThickness) { + return options.barThickness; } - return yScale.options.stacked ? ruler.categoryHeight * yScale.options.barPercentage : ruler.barHeight; + + barHeight = options.stacked ? ruler.categoryHeight * options.barPercentage : ruler.barHeight; + return Math.min(barHeight, maxBarThickness); }, // Get stack index from the given dataset index accounting for stacks and the fact that not all bars are visible