AngularJS Kendo chart not using complete space of screen

Question

I have used AngularJS,KendoCharts and Bootstrap in my project. I have used nav-tabs and have added three tabs on my screen which display three different Kendo charts. All is working well but I am facing one issue. When I click on second tab, the Kendo chart is not displayed on the whole screen but if I add a button on the screen which refresh the chart then it works fine and occupies the whole space. But why this is not occupying the whole space the first time it is shown. I tried various solutions/workarounds but none is fulfilling my criteria.

-- I added the width in the chart area of the chart and that works but then it disturbs the responsiveness of the chart.

-- I tried refresh/redraw on the chart after creating it in the angular controller/service but that also failed and gave the error that the id of the chart is undefined.

How can I refresh/redraw the chart after it is created in angular. I do not want any code in html, it should come happen in angular files. Or can this problem be resolved in any other way.

score 0 · Answer 1 · answered Feb 18 '15 at 11:29

0

You can use Bootstrap Grid System. In your HTML, Create a row, then a column of span 12. In that column put your chart. e.g.:

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <!-- your chart goes here -->
    </div>
</div>

It should work.

answered Feb 18 '15 at 11:29

Ishan Anand

403
2
10

I have tried that it works well on laptop screen but when I go to the Chrome developer tool and change the size to small screen it does not work well. I am not able to see the complete chart on small screen.Same thing works with the first active tab – pogo22 Feb 18 '15 at 11:35
have you used the column class as "col-xs-12"?? – Ishan Anand Feb 18 '15 at 11:43

score 0 · Answer 2 · edited May 23 '17 at 12:21

How to make the Kendo chart on mobile responsive?

I've done small directive:

app.directive("chartAligner", function ($window) {
    return function (scope, element) {
        var _kChart;

        angular.element($window).bind('resize', function () {
            if (_kChart) {
                _kChart.resize();
            } else {
                _kChart = element.getKendoChart()
            }
        });
    };
});

AngularJS Kendo chart not using complete space of screen

2 Answers2