Chart directive doesn't work when rendering in a carousel #1

mraible opened this Issue Mar 1, 2013 · 0 comments


None yet

1 participant


If you try to use this directive for Highcharts in a carousel, it results in the following error:

TypeError: Cannot read property 'length' of undefined at Object.ob.setMaxTicks

This seems to be caused by the following css in Bootstrap:

.carousel-inner > .item { display: none }

If I add an override with "display: block" to my stylesheet, everything
works, but the charts are stacked instead of in a carousel. The good news
is all the charts are rendered successfully.

A seemingly better solution is to modify the directive to show/hide the
"item" element so Highcharts is able to write to it.

if (element.parent().not(':visible')) {

var chart = new Highcharts.Chart(newSettings);

if (scope.$last) {
    $.each(element.parent().siblings(), function() {
        $(this).attr('style', '');
    element.parent().attr('style', '');

More info at

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment