Merge pull request #1231 from laurence-hudson-tessella/fix-title-layout-bug

Fix #1225 - (0.4.11-rc1) Incorrect layout when using titles on charts that are not visible at generation

src/legend.js

@@ -130,7 +130,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
 
     function getTextBox(textElement, id) {
         if (!$$.legendItemTextBox[id]) {
-            $$.legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem);
+            $$.legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem, textElement);
         }
         return $$.legendItemTextBox[id];
     }

src/text.js

@@ -47,14 +47,16 @@ c3_chart_internal_fn.redrawText = function (xForText, yForText, forFlow, withTra
             .style("fill-opacity", forFlow ? 0 : this.opacityForText.bind(this))
     ];
 };
-c3_chart_internal_fn.getTextRect = function (text, cls) {
+c3_chart_internal_fn.getTextRect = function (text, cls, element) {
     var dummy = this.d3.select('body').append('div').classed('c3', true),
         svg = dummy.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0),
+        font = this.d3.select(element).style('font'),
         rect;
     svg.selectAll('.dummy')
         .data([text])
       .enter().append('text')
         .classed(cls ? cls : "", true)
+        .style('font', font)
         .text(text)
       .each(function () { rect = this.getBoundingClientRect(); });
     dummy.remove();

src/title.js

@@ -13,9 +13,9 @@ c3_chart_internal_fn.redrawTitle = function () {
 c3_chart_internal_fn.xForTitle = function () {
     var $$ = this, config = $$.config, position = config.title_position || 'left', x;
     if (position.indexOf('right') >= 0) {
-        x = $$.currentWidth - $$.title.node().getBBox().width - config.title_padding.right;
+        x = $$.currentWidth - $$.getTextRect($$.title.node().textContent, $$.CLASS.title, $$.title.node()).width - config.title_padding.right;
     } else if (position.indexOf('center') >= 0) {
-        x = ($$.currentWidth - $$.title.node().getBBox().width) / 2;
+        x = ($$.currentWidth - $$.getTextRect($$.title.node().textContent, $$.CLASS.title, $$.title.node()).width) / 2;
     } else { // left
         x = config.title_padding.left;
     }
@@ -23,7 +23,7 @@ c3_chart_internal_fn.xForTitle = function () {
 };
 c3_chart_internal_fn.yForTitle = function () {
     var $$ = this;
-    return $$.config.title_padding.top + $$.title.node().getBBox().height;
+    return $$.config.title_padding.top + $$.getTextRect($$.title.node().textContent, $$.CLASS.title, $$.title.node()).height;
 };
 c3_chart_internal_fn.getTitlePadding = function() {
     var $$ = this;