UI Bootstrap with Flot causing misaligned ticks

Question

I'm working on an Angular web-app with UI Bootstrap and have run into a problem with the y-tick label alignment in flot charts using UI tabs.

With standard bootstrap tabs, the plots match inside and outside the tabset: http://jsfiddle.net/TDwGF/614/

However, with UI Bootstrap's tabset, we find that the y-tick labels overlap with the plot: http://jsfiddle.net/TDwGF/615/

In playing with different approaches in building the flot directive, I can create a plot where only half of the y-tick labels are misaligned (I was not able to reproduce this well in a minimal example, however).

I cannot find any inherited css modifications that would cause these issues, and I haven't met with any luck in going through the tabs directive source code.

Any help would be appreciated.

Answer 1

I remember that something similar had already happened with me while working with Highcharts.

The root cause of the misalignment is probably the browser dynamic rendering timing restraining the canvas/svg container space.

---

To workaround this kind of issue, just wrap the plot creation with a timeout to render it on next digest cycle:

App.directive('chart', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            setTimeout(function(){
                $.plot(elem, data, {});
                scope.$apply();
            }, 0);
        }
    };
});

See working setTimeout fiddle here.

---

Anternatively you could inject angular $timeout, so it already calls scope.$apply() for you:

App.directive('chart', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $timeout(function() {
                $.plot(elem, data, {});
            }, 0);
        }
    };
}]);

See working $timeout fiddle here.