Line chart resize causing height to differ from first time load

[96fauj]

I have 2 directives I'm using in the angular js I'm working on. The first is a d3-map directive and the second is this chart.js library with the common angular-chart.js directive.

The issue : When my page first loads and I use the map I load the chart.js directive alongside it although hidden (ng-hide) but because the chart.js is getting rendered before the map (which is in the same div) the chart.js assumes a default height of 520px~.

This is fine, however when I update data which I'm using in my d3-map directive the chart.js map then feels the need to adopt the height of the container (which on the first load wasn't there but now is 800px) and then takes a height of 800px.

I can't really set a max-height property on the chart.js canvas tag because when I do the x-axis and y-axis labels are skewed (stretched).

Is there a valid work-around for this?

[etimberg]

I think this is the same issue as #762