fix(axis): Correct label text position

- Fix getting correct anchor value for label text. - Add reference @see tag to doc for axis label position options. Fix #1011
naver · Aug 7, 2019 · 9beacfe · 9beacfe
1 parent 90ebdd9
commit 9beacfe
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 5 deletions.
diff --git a/spec/internals/axis-spec.js b/spec/internals/axis-spec.js
@@ -158,6 +158,71 @@ describe("AXIS", function() {
 		});
 	});
 
+	describe("axis label", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 170, 150, 250]
+					]
+				},
+				axis:{
+					x: {
+						label: {
+							text: 'This is a very long label centered'
+						}
+					},
+					y: {
+						label: {
+							text: 'This is a very long label centered'
+						}
+					},
+					y2: {
+						show: true,
+						label: {
+							text: 'This is a very long label centered'
+						}
+					}
+				}
+			};
+		});
+
+ 		const checkAnchor = value => {
+			["x", "y", "y2"].forEach(v => {
+				const anchor = chart.$.main.select(`.${CLASS[`axis${v.toUpperCase()}Label`]}`);
+
+ 				expect(anchor.style("text-anchor")).to.be.equal(value);
+			});
+		};
+
+ 		it("check axis label position ==> x: inner-right, y/y2: inner-top", () => {
+			// x: inner-right, y/y2: inner-top
+			checkAnchor("end");
+		});
+
+ 		it("set options label.position=center/middle", () => {
+			args.axis.x.label.position = "inner-center";
+			args.axis.y.label.position = "inner-middle";
+			args.axis.y2.label.position = "inner-middle";
+		});
+
+ 		it("check axis label position ==> x: inner-center, y/y2: inner-middle", () => {
+			// x: inner-right, y/y2: inner-top
+			checkAnchor("middle");
+		});
+
+ 		it("set options label.position=left/bottom", () => {
+			args.axis.x.label.position = "inner-left";
+			args.axis.y.label.position = "inner-bottom";
+			args.axis.y2.label.position = "inner-bottom";
+		});
+
+ 		it("check axis label position ==> x: inner-left, y/y2: inner-bottom", () => {
+			// x: inner-right, y/y2: inner-top
+			checkAnchor("start");
+		});
+	});
+
 	describe("axis y timeseries", () => {
 		before(() => {
 			args = {

diff --git a/src/axis/Axis.js b/src/axis/Axis.js
@@ -39,7 +39,8 @@ export default class Axis {
 
 		target.forEach(v => {
 			const classAxis = getAxisClassName(v);
-			const classLabel = CLASS[`axis${capitalize(v)}Label`];
+			const axisId = v.toUpperCase();
+			const classLabel = CLASS[`axis${axisId}Label`];
 
 			$$.axes[v] = main.append("g")
 				.attr("class", classAxis)
@@ -62,7 +63,7 @@ export default class Axis {
 				.attr("transform", ["rotate(-90)", null][
 					v === "x" ? +!isRotated : +isRotated
 				])
-				.style("text-anchor", this.textAnchorForXAxisLabel.bind(this));
+				.style("text-anchor", this[`textAnchorFor${axisId}AxisLabel`].bind(this));
 
 			this.generateAxes(v);
 		});

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -1924,7 +1924,11 @@ export default class Options {
 
 			/**
 			 * Set label on x axis.<br><br>
-			 *  You can set x axis label and change its position by this option. string and object can be passed and we can change the poisiton by passing object that has position key. Available position differs according to the axis direction (vertical or horizontal). If string set, the position will be the default.
+			 * You can set x axis label and change its position by this option.
+			 * `string` and `object` can be passed and we can change the poisiton by passing object that has position key.<br>
+			 * Available position differs according to the axis direction (vertical or horizontal).
+			 * If string set, the position will be the default.
+			 *
 			 *  - **If it's horizontal axis:**
 			 *    - inner-right [default]
 			 *    - inner-center
@@ -2123,11 +2127,12 @@ export default class Options {
 
 			/**
 			 * Set label on y axis.<br><br>
-			 * You can set y axis label and change its position by this option. This option works in the same way as axis.x.label.
+			 * You can set y axis label and change its position by this option. This option works in the same way as [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label).
 			 * @name axis․y․label
 			 * @memberof Options
 			 * @type {String|Object}
 			 * @default {}
+			 * @see [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label) for position string value.
 			 * @example
 			 * axis: {
 			 *   y: {
@@ -2507,11 +2512,12 @@ export default class Options {
 
 			/**
 			 * Set label on y2 axis.<br><br>
-			 * You can set y2 axis label and change its position by this option. This option works in the same way as axis.x.label.
+			 * You can set y2 axis label and change its position by this option. This option works in the same way as [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label).
 			 * @name axis․y2․label
 			 * @memberof Options
 			 * @type {String|Object}
 			 * @default {}
+			 * @see [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label) for position string value.
 			 * @example
 			 * axis: {
 			 *   y2: {