How To Create A Stacked Barchart Using D3?

I have an object array: var data = [ {'ORDER': 1, 'apples': 3840, 'bananas': 1920, 'cherries': 960}, {'ORDER': 2, 'apples': 1600, 'bananas': 1440, 'cherries': 960}, {'ORDER':

Solution 1:

There are a few issues present.

One, your data for the chart is already ready stacked in series:

var series = stack(data);

This: d3.stack()(series); will produce an empty array:

var data = [
  {"ORDER": 1, "apples": 3840, "bananas": 1920, "cherries": 960},
  {"ORDER": 2, "apples": 1600, "bananas": 1440, "cherries": 960},
  {"ORDER": 3, "apples":  640, "bananas":  960, "cherries": 640},
  {"ORDER": 4, "apples":  320, "bananas":  480, "cherries": 640}
];
var stack = d3.stack()
    .keys(["apples", "bananas", "cherries"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);
var series = stack(data);
console.log(d3.stack()(series));

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.js"></script>

---

Further down:

 .attr("x", function(d) { returnx(d.Order); })

This will return undefined. First, your property is ORDER not Order, and secondly, if you console.log(d) before that return, you'll notice that the property order is located at: d.data.ORDER.

This is also an issue with your scale:

 x.domain(series.map(function(d) { return d.Order; }));

For your x scale domain, you should use your data variable to map out the x domain: x.domain(data.map(function(d) { return d.ORDER; }));.

---

Speaking of scales, your width is best defined with a scaleBand()(documentation) rather than a scaleOrdinal(), this will allow you to set the width with x.bandwidth().

Lastly, still speaking of scales: For your y scale, your domain will not work properly, if using this bl.ock as an example, you'll see the creation of a total property that will define the upper end of the domain. So you will need to find a way to get the total of all the properties you want to graph for each ORDER. I've used an arbitrary 10 000 as the upper limit to produce a working example (I also don't know your color function, so I've just used an array):

var data = [
  {"ORDER": 1, "apples": 3840, "bananas": 1920, "cherries": 960},
  {"ORDER": 2, "apples": 1600, "bananas": 1440, "cherries": 960},
  {"ORDER": 3, "apples":  640, "bananas":  960, "cherries": 640},
  {"ORDER": 4, "apples":  320, "bananas":  480, "cherries": 640}
];

var h = 200;
var w = 200;
var svg = d3.select('body').append('svg').attr('width',w).attr('height',h);
var g = svg.append('g');


var x = d3.scaleBand().rangeRound([0, w-50]);
var y = d3.scaleLinear().range([h-50, 0]).domain([0,10000]);
var color = ['#bae4bc','#7bccc4','#43a2ca'];

var stack = d3.stack()
    .keys(["apples", "bananas", "cherries"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);
    
var series = stack(data);

x.domain(data.map(function(d) { return d.ORDER; }));

g.append("g")
    .selectAll("g")
    .data(series)
    .enter().append("g")
        .attr("fill", function(d,i) { return color[i]; })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
        .attr("x", function(d) { returnx(d.data.ORDER); })
        .attr("y", function(d) { returny(d[1]); })
        .attr("height", function(d) { returny(d[0]) - y(d[1]); })
        .attr("width", x.bandwidth());

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.js"></script>