max width configurations for bars, carbon-design-system#246

theiliad · Sep 19, 2019 · 954c205 · 954c205
1 parent 1643bb1
commit 954c205
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/packages/core/src/components/graphs/bar.ts b/packages/core/src/components/graphs/bar.ts
@@ -90,17 +90,23 @@ export class Bar extends Component {
 		bars.exit()
 			.remove();
 
+		const getBarWidth = () => {
+			return Math.min(
+				options.bars.maxWidth,
+				this.services.axes.getMainXAxis().scale.step() / 2
+			);
+		}
 		// Update styling and position on existing bars
 		// As well as bars that were just added
 		bars.enter()
 			.append("rect")
 			.merge(bars)
 				.classed("bar", true)
 				.attr("x", (d, i) => {
-					const barWidth = this.services.axes.getMainXAxis().scale.step() / 2;
+					const barWidth = getBarWidth();
 					return this.services.axes.getXValue(d, i) - (barWidth / 2);
 				})
-				.attr("width", this.services.axes.getMainXAxis().scale.step() / 2)
+				.attr("width", getBarWidth)
 				.transition(this.services.transitions.getTransition("bar-update-enter", animate))
 				.attr("y", (d, i) => this.services.axes.getYValue(d[1], i))
 				.attr("fill", d => this.model.getFillScale()[d.datasetLabel](d.label))

diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts
@@ -68,6 +68,9 @@ const axisChart: AxisChartOptions = Tools.merge({}, baseOptions, {
  * options specific to line charts
  */
 const stackedBarChart: BarChartOptions = Tools.merge({}, axisChart, {
+	bars: {
+		maxWidth: 16
+	}
 } as BarChartOptions);
 
 /**

diff --git a/packages/core/src/interfaces/charts.ts b/packages/core/src/interfaces/charts.ts
@@ -60,7 +60,8 @@ export interface AxisChartOptions extends BaseChartOptions {
  */
 export interface BarChartOptions extends AxisChartOptions {
 	bars?: {
-
+		width?: number;
+		maxWidth?: number;
 	};
 }