Responsive: true

[jacobypl]

Hi,

i have issues with this option. First, my canvas was blank. After searching a solution i found out cause of this. In another topic there was a fix - set responsive false. So it worked! @jtblin said here https://github.com/jtblin/angular-chart.js/issues/29

don't think that can be easily fixed unfortunately otherwise that would be already done. If the workaround described above doesn't work for you, another option is to set responsive to false in the options and set a height and width directly on the canvas.

But i need to make it responsive. :) And this is a frustrating.

So, settings:

ChartJsProvider.setOptions({
    responsive: true
});

Controller:

vm.data = [[1, 2, 3]];
vm.labels = ["Test1", "Test2", "Test3"];
vm.series = ['Series A', 'Series B'];

HTML:

<canvas 
id="line" 
class="chart chart-line" 
chart-data="IssueAnalyticsCtrl.data"
chart-labels="IssueAnalyticsCtrl.labels"
chart-series="IssueAnalyticsCtrl.series"
width="800"
height="300">
</canvas>

If I set responsive false - everything is alright. If it's set true - chart is not rendering without any issue in console. Chart is still in DOM (iframe and canvas) - but page is blank.

Cheers.

[jtblin]

I implemented some workaround a long time ago but it doesn't work 100% of the time. Do you use ng-show/hide or a framework that have tabs or something like that?

[jacobypl]

Nah, im not using ng-show/hide on this feature. I'm not using tabs also - ui.router for routing just.

[jtblin]

What does ui.router use under the hood to show and hide pages?