Modal And Canvas Elements

Hi All,

As a precursor, i’m fairly new to angular.

My problem is using Chart JS and modals.

When I call a modal from a different menu item and return to the home menu item, the charts width and height is set to 0. Changes to the data do not cause the chart to reappear, nor does resizing the div which contains the chart.

The behaviour can be seen below:


I remove the modal when it is closed, and I’ve tried a lot of combinations like reloading the controller when i return to it, and nothing seems to fix the weird behaviour except a full refresh.

I’m wondering what would cause this weird behaviour, is it chart.js or Ionic?


Chart js was the problem.

I had to set the global default of being responsive to false. I will update if I find a better solution.

EDIT: For anyone else struggling with this, don’t cache the view. If you have a good data caching model, the view doesn’t need to be cached and you can just re render it every time…

See and scroll down to caching.


@gunmania0 You can always wrap the logic you need in our view life cycle events.

$scope.$on('$ionicView.afterEnter', function(){
  // Any thing you can think of
1 Like

Thank you so much for this! I’d been struggling with this issue for a long time!

For anyone who doesn’t want to find it in the docs link, just add the following cache-view attribute to your ion-view element:

<ion-view cache-view="false" view-title="Statistics"></ion-view>

I found the solution modifying the Chart.js just need to change the resize method, because with the Dom cache, the calculate may fails sets the width and height as 0. With this correction you don’t need to set the cache of the view to false


The original code is:

canvas.width = this.chart.width = newWidth;
canvas.height = this.chart.height = newHeight;

And this has to change to:

if (newWidth > 0)
        canvas.width = this.chart.width = newWidth;
if (newHeight > 0)
        canvas.height = this.chart.height = newHeight;