Cannot read property "getPropertyValue" of null in xChart

Question

I am trying to use d3-based charting library xChart to create a graph module in my webapp. I am just using the example data provided by the xChart documentation, and I get this error every time I try to create the chart:

Uncaught TypeError: Cannot read property 'getPropertyValue' of null

The error is on line 666 (lol) of d3.js in the getComputedStyle method.

if (n < 2) return d3_window.getComputedStyle(this.node(), null).getPropertyValue(name);

My JavaScript is as follows:

var data = {
    xScale: "ordinal",
    yScale: "linear",
    main: [
      {
        className: ".pizza",
        data: [
          {
            x: "Pepperoni",
            y: 4
          }, {
            x: "Cheese",
            y: 8
          }
        ]
      }, {
        className: ".pizza",
        data: [
          {
            x: "Pepperoni",
            y: 6
          }, {
            x: "Cheese",
            y: 5
          }
        ]
      }
    ]
  };
  var myChart = new xChart('bar', data, '#graph-figure');

And my HTML is

<figure id="graph-figure"></figure>

Can anyone help me out with this?

score 2 · Accepted Answer · answered Aug 12 '14 at 14:08

You are most likely executing your javascript before the dom is ready. You can either wrap your javascript in a window.onload function...

window.onload = function(){
  // your code here
}

Or include your <script> or inline code right before your closing </body> tag.

Cannot read property "getPropertyValue" of null in xChart

1 Answers1