score:1

Accepted answer

The key is to play with the y and height attributes of the bars to position them correctly.

For y, change it to:

  y: function(d) {
          return yScale(Math.max(0, d.amount));
        },

And for the height, change it to:

height: function(d) {
              return Math.abs(yScale(d.amount) - yScale(0));
            },

You can then style the negative bars to make them a different color.

Check the updated Plunkr - http://plnkr.co/edit/q7dQsPW0PiPuwFTy8gLN?p=preview

Edit:

For the coloring part, you can achieve it with a 1 liner if you want to reduce lines and want more simplicity.

Instead of:

  fill: function(d) {
                var col = colorChosen
                if (d.amount < 0) {
                    col = "#FF0000";
                }
                return col;
            },
  });

You can do:

  fill: function(d) {
                        return d.amount < 0 ? "#FF0000" : colorChosen;
                    }, 

Related Query

More Query from same tag