fix(title): fix title text center align

fix title text alignment

Fix #3363

src/ChartInternal/internals/title.ts

@@ -12,7 +12,7 @@ import {$TEXT} from "../../config/classes";
  * @returns {string|number} text-anchor value or position in pixel
  * @private
  */
-function getTextPos(pos = "left", width?: number | any): number | "start" | "middle" | "end" {
+function getTextXPos(pos = "left", width?: number | any): number | "start" | "middle" | "end" {
 	const isNum = isNumber(width);
 	let position;
 
@@ -41,7 +41,7 @@ export default {
 
 			const text = $el.title
 				.append("text")
-				.style("text-anchor", getTextPos(config.title_position))
+				.style("text-anchor", getTextXPos(config.title_position))
 				.attr("class", $TEXT.title);
 
 			setTextValue(text, config.title_text, [0.3, 1.5]);
@@ -57,63 +57,25 @@ export default {
 		const {config, state: {current}, $el: {title}} = $$;
 
 		if (title) {
-			const y = $$.yForTitle.call($$);
+			const x = getTextXPos(config.title_position, current.width);
+			const y = (config.title_padding.top || 0) +
+				$$.getTextRect($$.$el.title, $TEXT.title).height;
 
-			if (/g/i.test(title.node().tagName)) {
-				title.attr("transform", `translate(${getTextPos(config.title_position, current.width)}, ${y})`);
-			} else {
-				title.attr("x", $$.xForTitle.call($$)).attr("y", y);
-			}
+			title.attr("transform", `translate(${x}, ${y})`);
 		}
 	},
 
-	/**
-	 * Returns the x attribute value of the title
-	 * @returns {number} x attribute value
-	 * @private
-	 */
-	xForTitle(): number {
-		const $$ = this;
-		const {config, state: {current}} = $$;
-		const position = config.title_position || "left";
-		const textRectWidth = $$.getTextRect($$.$el.title, $TEXT.title).width;
-		let x;
-
-		if (/(right|center)/.test(position)) {
-			x = current.width - textRectWidth;
-
-			if (position.indexOf("right") >= 0) {
-				x = current.width - textRectWidth - config.title_padding.right;
-			} else if (position.indexOf("center") >= 0) {
-				x = (current.width - textRectWidth) / 2;
-			}
-		} else { // left
-			x = (config.title_padding.left || 0);
-		}
-
-		return x;
-	},
-
-	/**
-	 * Returns the y attribute value of the title
-	 * @returns {number} y attribute value
-	 * @private
-	 */
-	yForTitle(): number {
-		const $$ = this;
-
-		return ($$.config.title_padding.top || 0) +
-			$$.getTextRect($$.$el.title, $TEXT.title).height;
-	},
-
 	/**
 	 * Get title padding
 	 * @returns {number} padding value
 	 * @private
 	 */
 	getTitlePadding(): number {
 		const $$ = this;
+		const {$el, config} = $$;
 
-		return $$.yForTitle() + ($$.config.title_padding.bottom || 0);
+		return (config.title_padding.top || 0) +
+			$$.getTextRect($el.title, $TEXT.title).height +
+			(config.title_padding.bottom || 0);
 	},
 };

test/internals/title-spec.ts

@@ -36,13 +36,15 @@ describe("TITLE", () => {
 		describe("with no padding and no position", () => {
 			it("renders the title at the default config position", () => {
 				const title = chart.$.svg.select(".bb-title").node();
+				const titleRect = title.getBoundingClientRect();
 				const [x, y] = title.parentNode
 					.getAttribute("transform")
 					.split(",")
 					.map(v => util.parseNum(v));
 
 				expect(x).to.be.equal(chart.internal.state.current.width / 2);
-				expect(y).to.be.equal(title.getBBox().height);
+				expect(y).to.be.equal(titleRect.height);
+				expect(title.style.textAnchor).to.be.equal("middle");
 			});
 
 			it("renders the title text", () => {
@@ -76,13 +78,15 @@ describe("TITLE", () => {
 			describe("and position center", () => {
 				it("renders the title at the default config position", () => {
 					const title = chart.$.svg.select(".bb-title").node();
+					const titleRect = title.getBoundingClientRect();
 					const [x, y] = title.parentNode
 						.getAttribute("transform")
 						.split(",")
 						.map(v => util.parseNum(v));
 
 					expect(x).to.be.equal(chart.internal.state.current.width / 2);
-					expect(y).to.be.equal(title.getBBox().height + args.title.padding.top);
+					expect(y).to.be.equal(titleRect.height + args.title.padding.top);
+					expect(title.style.textAnchor).to.be.equal("middle");
 				});
 
 				it("adds the correct amount of padding to fit the title", () => {