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 -


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