fix($browser): Use dynamic step value for margin instead of fixed value.

BREAKING CHANGE: None.
carbon-design-system · Jan 17, 2019 · b9910f0 · b9910f0
1 parent 9f54468
commit b9910f0
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/core/src/base-axis-chart.ts b/packages/core/src/base-axis-chart.ts
@@ -193,7 +193,7 @@ export class BaseAxisChart extends BaseChart {
 			const chartSize = this.getChartSize();
 			const width = chartSize.width - margins.left - margins.right;
 
-			this.x = scaleBand().rangeRound([0, width]).padding(Configuration.scales.x.padding);
+			this.x = scaleBand().rangeRound([0, width]);
 			this.x.domain(this.displayData.labels);
 		}
 	}

diff --git a/packages/core/src/line-chart.ts b/packages/core/src/line-chart.ts
@@ -65,7 +65,7 @@ export class LineChart extends BaseAxisChart {
 
 		// D3 line generator function
 		this.lineGenerator = line()
-			.x((d, i) => this.x(this.displayData.labels[i]) + margins.left)
+			.x((d, i) => this.x(this.displayData.labels[i]) + this.x.step() / 2)
 			.y((d: any) => this.y(d))
 			.curve(getD3Curve(curveName, curveOptions));
 
@@ -86,7 +86,7 @@ export class LineChart extends BaseAxisChart {
 			.enter()
 				.append("circle")
 				.attr("class", "dot")
-				.attr("cx", d => this.x(d.label) + margins.left)
+				.attr("cx", d => this.x(d.label) + this.x.step() / 2)
 				.attr("cy", d => this.y(d.value))
 				.attr("r", Configuration.charts.pointCircles.radius)
 				.attr("stroke", d => this.colorScale[d.datasetLabel](d.label));
@@ -130,7 +130,7 @@ export class LineChart extends BaseAxisChart {
 			.enter()
 				.append("circle")
 				.attr("class", "dot")
-				.attr("cx", (d, i) => this.x(d.label) + margins.left)
+				.attr("cx", (d, i) => this.x(d.label) + this.x.step() / 2)
 				.attr("cy", (d: any) => this.y(d.value))
 				.attr("r", 4)
 				.style("opacity", 0)
@@ -189,7 +189,7 @@ export class LineChart extends BaseAxisChart {
 				return self.addLabelsToDataPoints(parentDatum, i);
 			})
 			.transition(transitionToUse)
-			.attr("cx", d => this.x(d.label) + margins.left)
+			.attr("cx", d => this.x(d.label) + this.x.step() / 2)
 			.attr("cy", d => this.y(d.value))
 			.attr("r", Configuration.lines.points.strokeWidth)
 			.attr("stroke", d => this.colorScale[d.datasetLabel](d.label));