CSS file not being included?

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]
    }]
  };

damn you have so many expenses :-) how can you afford Internet? :D — Flash Thunder
– Flash Thunder, Commented Apr 10, 2016 at 10:03
The plunker demo works fine. Please add a plunkter which provide your error or add your controller/views. — lin
– lin, Commented Apr 10, 2016 at 10:13
Yes, I knwo that the demo works just fine - that's why I wanted to integrate it into my existing app ;-) Unfotuantely the app is too large & complex to Plunk (plus it needs to Ajax with my server). Can you see anything wrong with waht I have posted (he asked, hopefully)? — Mawg
– Mawg, Commented Apr 10, 2016 at 10:16
The plunkr has single quotes around bar in the html. That might be important. — Steve Campbell
– Steve Campbell, Commented Apr 10, 2016 at 11:55
Exceedingly Obbservant, sir! I had hoped that that would be it. Alas, no :-( — Mawg
– Mawg, Commented Apr 10, 2016 at 11:58

Steve Campbell · Accepted Answer · 2016-04-10 12:01:53Z

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.

answered Apr 10, 2016 at 12:01

Steve Campbell

3,6452 gold badges34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mawg Over a year ago

Thanks, Steve. After incorporting both your comment and your answer, there are no more errors, but also no chart. I think I need to read the docs in more detail

Collectives™ on Stack Overflow

CSS file not being included?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related