Added a maxBarThickness setting for bar charts xAxis (#3963)

Added a `maxBarThickness` setting for bar charts xAxis
chartjs · Mar 4, 2017 · 5234899 · 5234899
1 parent a3b8fb2
commit 5234899
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git 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) |
@@ -113,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
@@ -166,10 +166,16 @@ module.exports = function(Chart) {
 			var me = this;
 			var meta = me.getMeta();
 			var xScale = me.getScaleForId(meta.xAxisID);
-			if (xScale.options.barThickness) {
-				return xScale.options.barThickness;
+			var options = xScale.options;
+			var maxBarThickness = options.maxBarThickness || Infinity;
+			var barWidth;
+
+			if (options.barThickness) {
+				return options.barThickness;
 			}
-			return xScale.options.stacked ? ruler.categoryWidth * xScale.options.barPercentage : ruler.barWidth;
+
+			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
@@ -465,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