javascript - Strange Angular-ChartJS issue, not displaying correctly in Ionic App -

i'm building ionic app angularjs. in app want line-chart of data. yesterday asked question (angular-chart not rendering anything) answered, there's new problem.

sometimes chart instantly visible, when rotate screen between landscape/portrait keeps getting bigger every rotation. other times graph not visible @ (except legend) till rotate screen times.

when check out web inspector on iphone see html-attributes height gets bigger everytime. same css-height style.

the html in web-inspector looks this: (this when graph on inactive tab)

<div ng-show="graph.visible &amp;&amp; finishedloading" class="ng-hide" style="">   <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getcolour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="424" style="width: 288px; height: 212px;">   </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>ondergrens</li></ul></chart-legend></div> </div> 

after making tab active html looks this:

<div ng-show="graph.visible &amp;&amp; finishedloading" class="" style="">   <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getcolour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="424" style="width: 288px; height: 212px;">   </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>ondergrens</li></ul></chart-legend></div> </div> 

this time graph instantly visible, not case. think has web-inspector. when don't have web inspector open, legend visible.

after rotating landscape , portrait 4 times, html looks this:

<div ng-show="graph.visible &amp;&amp; finishedloading" class="" style="">   <div class="chart-container"><canvas class="chart chart-line" data="graph.data" labels="graph.labels" options="graph.options" series="graph.series" colours="graph.colours" getcolour="graph.getcolour" click="graph.click" hover="graph.hover" legend="graph.legend" width="576" height="816" style="width: 288px; height: 408px;">   </canvas><chart-legend><ul class="line-legend"><li><span style="background-color:rgba(70,191,189,1)"></span>waarde</li><li><span style="background-color:rgba(247,70,74,1)"></span>bovengrens</li><li><span style="background-color:rgba(253,180,92,1)"></span>ondergrens</li></ul></chart-legend></div> </div> 

as can see, height gets bigger every rotation.

the html-file looks this:

<div ng-show="graph.visible && finishedloading">   <canvas      class="chart chart-line"     data="graph.data"     labels="graph.labels"     options="graph.options"     series="graph.series"     colours="graph.colours"     getcolour="graph.getcolour"     click="graph.click"     hover="graph.hover"     legend="graph.legend">   </canvas> </div> 

the $scope.graph looks this:

  $scope.graph = {     data: [       [], // value       [], // upper value       [] // lower value     ],     labels: [],     options: {       animation: false,       pointdotradius : 2,       datasetfill : false,       responsive: true,       maintainaspectratio: false,       scalegridlinecolor : 'rgba(0, 0, 0, .1)',       showtooltips: false     },     series: ['waarde', 'bovengrens', 'ondergrens'],     colours: ['#46bfbd', '#f7464a', '#fdb45c'],     // getcolour:     // click:     // hover:     legend: true,     visible: false   } 

and values set here:

  function loadgraphdata() {     $scope.graph.data = [       [], // value       [], // upper value       [] // lower value     ];     $scope.graph.labels = [];      (var key in $scope.results) {       var result = $scope.results[key];        $scope.graph.data[0].push(result.value);       $scope.graph.data[1].push(result.high);       $scope.graph.data[2].push(result.low);        $scope.graph.labels.push($filter('date')(result.date, 'dd mmm hh:mm'));     }   }; 

which called once request has finished loading, before tab graph visible.

the css have applied canvas is:

canvas {     width: 100%!important;     height: 100%!important; } 

i hope problem clear , can me out. i've tried think of. if more info needed, let me know!

edit// note: when put graph on first tab (which active) graph instantly visible, has same strange issue of getting bigger when resizing browser window..

try after adding crosswalk plugin. hope works. plugin documentation here