0

I'm using angularchart to create charts in my web application.

I have this pretty standard markup which works fine with firefox and chrome:

<div ng-if="visible">
    <canvas height="20%" width="80%" style="width: 80%; height: 20%;" id="line_general" class="chart chart-line" chart-data="lineData" chart-legend="true" chart-colours="colours"
    chart-labels="lineLabels" chart-series="lineSeries"/>
</div>

It works on every screen size and if you reduce the screen it automatically resizes. However, on internet explorer (my version is 10) it doesn't work: it not only does not resize but the resulting graph is also blurred.

How can I solve that?

edit:

interesting enough, it seems the culprit is that ng-if in the outside div! By removing it it seems working fine on ie as well. Nevertheless, I need that ng-if so simply removing it doesn't solve my problem...

Phate
  • 6,066
  • 15
  • 73
  • 138
  • I'm actually surprised that it automatically resizes in Chrome and Firefox. Canvases are a bit like images, and by definition should have an exact-pixel width and height. (If the user resizes their browser, the only valid way to redraw its content with new width and height would be via your JavaScript). – Katana314 Sep 17 '15 at 16:15
  • Edit added: it works on ie as well but the problem remains unsolved. About the automatic resize I guess it's angular-chart which does the magic :) – Phate Sep 17 '15 at 16:23

1 Answers1

0

Solved. Apparently it is due to the fact that ng-if actually removes the canvas from the html so, when updating the graph with new data, it somewhat does not update the size. I created a style with 

visibility:hidden;

in it and used the ng-class construct to actually just hide the canvas without actually removing it.

<div ng-class="visible==true ? 'chart-container' : 'chart-hidden'>
  <canvas .../>
</div>
Phate
  • 6,066
  • 15
  • 73
  • 138