NVD3 Stacked Area chart looks weird

Question

I've tried using stacked area chart via NVD3 with some real data and it looks strange: Stacked Area Chart using NVD3

I guess something's wrong with the data or data accessor function but I can't figure out what exactly.

  var chart = nv.models.stackedAreaChart()
            .x(function(d) { if (typeof d !== "undefined" && d !== null) return d[0] })
            .y(function(d) { if (typeof d !== "undefined" && d !== null) return d[1] })
            .clipEdge(true)
            .useInteractiveGuideline(true)
            ;

Also I've noticed that it doesn't work at all if "values" array has different length across different data objects. Is it NVD3's restriction or something?

My fiddle

This is because your series have different time ranges. You should use the same time scale to display correctly. See example - other scale is used in this example. Series difference is calculated as the difference between elements with the same index of data array. So, think this is why series length should be the same. — krispo
Thank you for the answer. Makes sense, but same series length and time scale requirement cannot be always achieved with real data. Also, I've noticed that useInteractiveGuideline has gone in your example though it's set to true, throwing "Cannot read property '0' of undefined" error. — Osman Mazinov
take a general time scale and range that cover all your series, and then just fill missing values (on y axis) with 0 for all series. should work! — krispo

Osman Mazinov Osman Mazinov · Accepted Answer · 2014-08-13T19:58:20

Thanks to krispo, the problem was resolved. In order to display a data correctly NVD3 requires the data to follow the next rules:

Series should have the same time scale (range).
Series length, i.e. 'values' array length should be the same across all objects in data.

In order to satisfy the 1st requirement, the data should be transformed as follows:

data = data.map(function(series){
  series.values = series.values.map(function(d,i){
      return [data[2].values[i][0], d[1]]
  })
  return series;
});

If the data has different series lengths (2nd requirement) then you should fill missing values series with zeroes.

Working example is here.

Result picture is below: enter image description here

NVD3 Stacked Area chart looks weird

1 Answers