D3 - stacked bar chart shows wrong data in the chart

0
votes

I have a plunker here - https://plnkr.co/edit/7Eg34HyhXY6M3UJccAFq?p=preview

var data = [{
  day: 'Mon',
  apricots: 150,
  blueberries: 20,
  cherries: 15
}];

It's a simple stacked bar chart using the dat above

The stacked chart seem to display the data incorrectly

apricots seem to go to 150 blueberries looks like it could be 20 cherries that is the smallest at 15 is the biggest bar.

Have I done something wrong

1
javascriptd3.js

1 Answers

2
votes

A few minor errors, in the height section it should be:

.attr('height', (d) => {
  return   y(d[0]) - y(d[1]);
})

and in the y attr

.attr('y', (d) => {
  return y(d[1]);
})

and the domain should be 

y.domain([0, d3.max(stackedSeries, (d) => {
  return d3.max(d, (d) => {
    return d[1];
  });
})])

Here's the edited: Plunker