3 ms·
We've experimented with this, and it can help, but it's not a silver bullet. For example, we had a stacked bar chart where we used a horizontal flexbox for the
by stupidcar 10y ago
We've experimented with this, and it can help, but it's not a silver bullet. For example, we had a stacked bar chart where we used a horizontal flexbox for the core of the chart. Each entry in the flexbox was a separate SVG. This let use do nice things like set a minimum size for each bar and have the chart overflow and scroll if there wasn't enough space to draw all the bars.
But then we got a requirement to overlay a line chart on the bars. And that meant layering a separate SVG on top, and doing a bunch of script work to make sure everything lined up correctly. E.g. detecting when the window resized, or when the content overflowed, etc.
It worked, but the resulting code is not at all fun to work with. The frustrating thing is the that the layout is trivial in pure HTML + CSS, and the graphics are trivial in pure SVG. But neither has the complete story, and so you end up having to jump through so many hoops, when it feels like it could be so much easier.