CSS file not being included? - css

Question

You might want to read the [update] first, as the nature of the problem has changed.
I am trying to add charting to an AngularJs app. I get the following error
angular.js:13236 Error: Please set height and width for the chart element
at validateHeightAndWidth (https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.js:138:15)
at link (https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.js:106:7)
at http://localhost/plafotrm_2/js/angular/angular.js:9486:44
at invokeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:9492:9)
at nodeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8978:11)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8226:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13) <div id="chart1" ac-chart="chartType" ac-data="chartData" ac-config="chartConfig" class="ng-isolate-scope">
However, in my index.html, I <link rel="stylesheet" href="css/charts.css" /> and in css/charts.css, I
.chartStyle
{
width: 500px;
height: 500px;
}
and the chart is supposed to go into
<div
data-ac-chart="bar"
data-ac-data="chartData"
data-ac-config="chartConfig"
class="chartStyle" >
</div>
It all looks fine to me, and I copied from a Plunk.
I am sure that I am pulling in the correct CSS File, because if I rename it, I get an error in the developer console. But even with no error about the CSS file, I get the error shown above.
Any ideas, anyone?
[Update]
After applying #SteveCampbell 's comment and answer, there are now no errors in the developer console - alas, there is also no chart on the page :-(
The HTML looks like this
<div data-ac-chart="'bar'" data-ac-data="chartData" data-ac-config="chartConfig" class="chartStyle ng-isolate-scope"></div>
no height or width, so that waitForHeightAndWidth : true is only masking the problem :-(
I think I need to read the docs ...
I have this in the controller ...
$scope.chartConfig = {
title: 'Products',
tooltips: true,
labels: false,
waitForHeightAndWidth : true,
mouseover: function() {},
mouseout: function() {},
click: function() {},
legend: {
display: true,
//could be 'left, right'
position: 'right'
}
};
$scope.chaartData = {
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
x: "Laptops",
y: [100, 500, 0],
tooltip: "this is tooltip"
}, {
x: "Desktops",
y: [300, 100, 100]
}, {
x: "Mobiles",
y: [351]
}, {
x: "Tablets",
y: [54, 0, 879]
}]
};

Answer 1

The issue is not related to CSS. Probably it occurs because the chart element is not initially visible on the first digest cycle, and thus it gets an error when trying to determine the height and width.
The readme on https://github.com/chinmaymk/angular-charts implies that you can set config.waitForHeightAndWidth to true to avoid this problem.