fix(core): fix to allow chart to toggle on and off using attribute/css properties

Author: natashadecoste

packages/core/src/components/essentials/title.ts

@@ -10,8 +10,16 @@ export class Title extends Component {
 	 * Truncates title creating ellipses and attaching tooltip for exposing full title.
 	 */
 	truncateTitle() {
-		const containerWidth  = DOMUtils.getSVGElementSize(this.parent).width;
-		const title =  DOMUtils.appendOrSelect(this.parent, "text.title");
+		// get a reference to the title elements to calculate the size the title can be
+		const containerBounds = DOMUtils.getSVGElementSize(this.parent, { useAttr: true });
+		// need to check if the width is 0, and try to use the parent attribute (getSVGElement wont validate if height: 0)
+		const containerWidth = containerBounds.width ? containerBounds.width : this.parent.node().getAttribute("width");
+		const title = DOMUtils.appendOrSelect(this.parent, "text.title");
+
+		// sanity check to prevent stack overflow on binary search
+		if (containerWidth <= 0) {
+			return;
+		}
 
 		// check if the title is too big for the containing svg
 		if (title.node().getComputedTextLength() > containerWidth) {
@@ -35,17 +43,17 @@ export class Title extends Component {
 
 			// add events for displaying the tooltip with the title
 			const self = this;
-			title.on("mouseenter", function() {
+			title.on("mouseenter", function () {
 				self.services.events.dispatchEvent("show-tooltip", {
 					hoveredElement: title,
 					type: TooltipTypes.TITLE
 				});
 			})
-			.on("mouseout", function() {
-				self.services.events.dispatchEvent("hide-tooltip", {
-					hoveredElement: title,
+				.on("mouseout", function () {
+					self.services.events.dispatchEvent("hide-tooltip", {
+						hoveredElement: title,
+					});
 				});
-			});
 		}
 	}
 
@@ -77,7 +85,7 @@ export class Title extends Component {
 	 * @param width the width of the svg container that holds the title
 	 */
 	protected getSubstringIndex(title, start, end, width) {
-		const mid  = Math.floor((end + start) / 2);
+		const mid = Math.floor((end + start) / 2);
 		if (title.getSubStringLength(0, mid) > width) {
 			return this.getSubstringIndex(title, start, mid, width);
 		} else if (title.getSubStringLength(0, mid) < width) {