Building a stacked chart with React and D3

A Project based on the BaddAssChart

This little tutorial was based in the BaddAssChart post to explain how to proceed to build a stacked chart. I already had implemented this with vanilla javascript but I want to build something with react components structure. Thus, I found the BaddAssChart post and It show me good components organization. I used all the components except the Bars and created the Stack component to organize a stack of bars.

<Stack /> Component

The Stack component replace the Bar component proposed in the BaddAssChart because the method to build each part of stack that compose one column need to control the horizontal position and taking care to not overlap each part of the stack.

Another thing that I added was the bar behind the stack bar to make a better sensation for the user when the mouse is over. This feature was added just adding some css and the results as it follows:

Bitbucket repo: