This was my first serious encounter with D3.js. I was like the little David figuring out how to deal with the mighty Goliath. I had a task that should have been done and I was looking for ways to accomplish it - show inventory stock consumption and replenishment. The problem is that if you go with the ordinary linear chart and show the replenished quantity, you don’t get the consumption quantity on the day of replenishment. One solution to this problem is to show both the consumption and replenishment in the same day (week, month).

It was written around 5 years ago, so its code is definitely not a candidate for the beauty contest, but the key points in its implementation is to override the line generator x method and adjust the line chart to the middle of each bar in the stacked chart. I’ve left a comment in the source code where to override the x method for those who are interested.

Enjoy!