How to create stacked grouped bar chart with visx? #1732
-
|
Hey, guys! I have been trying to figure out a way to create a stacked grouped bar chart with visx. However, since no example is out there, I haven't been able to create one yet. I was hoping for something like this: But the x-axis will be a dateScale. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
The first step of doing this is to make the data friendly to this chart. I made the data like this The trick is to control the width by the length of your data. For example, if we want to visualize 3 groups of stacked bars, simply divide the width of each bar by 3 and multiply some constant between 0 and 1 (since bars need space from each other). Then, we need to control the X position. Loop the total data and subtract or add a multiple of the bar width to the X position depending on the group's index. Here is a sandbox link demonstrating how you can create a stacked group bar chart with visx. |
Beta Was this translation helpful? Give feedback.
-
|
Oh, wow! Thank you so much @tkdgus96 for your help. I am gonna try this out. |
Beta Was this translation helpful? Give feedback.
The first step of doing this is to make the data friendly to this chart. I made the data like this
[ [first data group], [second data group], [third data group] ]The trick is to control the width by the length of your data. For example, if we want to visualize 3 groups of stacked bars, simply divide the width of each bar by 3 and multiply some constant between 0 and 1 (since bars need space from each other). Then, we need to control the X position. Loop the total data and subtract or add a multiple of the bar width to the X position depending on the group's index.
Here is a sandbox link demonstrating how you can create a stacked group bar chart with visx.