I m using Plotly JS to draw a percent stacked bar chart where each "element" of each "bar" is totally independent from the elements of the other bars. Each bar may have a different number of elements. There may be many bars (e.g. 200), and each bar may have many elements (e.g. 50). The color of each element must be set independent from the color of any other element.
To be clear, the following image explains what I mean by "bar" and "element":
See this codepen for a fully functional implementation of this.
The problem I m having is with performance and memory consumption for a larger number of bars. In the above codepen, if you change the first line
const NUM_BARS = 50;
so that there are, say, 200 bars instead of 50, then you will observe the performance degradation.
I suspect the performance is poor because I am using Plotly JS s percent stacked bar chart in a somewhat unnatural way: each element is a separate trace, so there are tons of traces for Plotly to handle.
I m hoping someone can help me with either or both of the following questions: (1) Is there a better (more performant) way to construct this plot using Plotly JS than how I m doing it in the above codepen? (2) Is there another JavaScript plotting library that would allow me to construct this type of plot with better performance?