NVD3 Line Chart Uncaught TypeError: Cannot read property 'x' of undefined

Question

I'm using the NVD3 library to make simple line charts based on data generated in a Rails controller. The code I'm using to generate data in Rails is:

task.task_values.each do |u|
 array.push({ :x => u.created_at.to_i * 1000, :y => u.value.to_i })
end
data_label = task.name + " ("+ task_unit +")"
taskValuesList = [{:key => data_label, :values => array}]
data = {:type => "line", :data => taskValuesList}

Then, in my view, I have the following JS code:

nv.addGraph(function() {
var chart = nv.models.lineChart()
  .x(function(d) { return d.x; })
      .y(function(d) { return d.y; });

chart.xAxis
   .showMaxMin(false)
       .tickFormat(function(d){return d3.time.format("%m/%d/%y")(new Date(d));});
chart.yAxis
   .tickFormat(d3.format(',d'));

d3.select('#chart<%= i %> svg')
  .datum(data.data)
  .transition().duration(500)
  .call(chart);

nv.utils.windowResize(chart.update);
  return chart;
});

The chart renders properly, but when I try to mouseover data points to show the tooltip, I get the error "Uncaught TypeError: Cannot read property 'x' of undefined"

Answer 1

I had the same error and got stuck for hours. After some investigation I found out that I was using the most recent version of d3.js which was not compatible to the most recent version of nvd3.js

Make sure that you are using the d3.js version that is included in the nvd3 repository: /lib/d3.v3.js

That was quite tricky to find out. In particular because the nvd3 documentation tells you to use the latest d3.js version ;-(

Answer 2

If you are seeing a Uncaught TypeError: Cannot read property 'x' of undefined it is possibly because your data series contain different numbers of points.

Check if this happens with only one series.

Answer 3

Make sure your data is in JSON format,

Here is how the sample JSON data should look like

data = [{
    key : "Line 1",
    color : "#51A351",
    values : [{
        x : 1373403179000,
        y : 40
    }, {
        x : 1373403469000,
        y : 30
    }, {
        x : 1373403567000,
        y : 20
    }]
}, {
    key : "Line 2",
    color : "#BD362F",
    values : [{
        x : 1373403179000,
        y : 60
    }, {
        x : 1373403469000,
        y : 50
    }, {
        x : 1373403567000,
        y : 70
    }]
}]

UPDATE : Here is a working fiddle of a NVD3 Line chart