I'm designing a table visualization and due to it's requirements I need to show bar graphs for each item. It's a nested table, and for each item there is three bars.

This image may help to visualize

nested table example

I'm having trouble with the nesting of bars and how to deal with the limitation of space. There is any pattern for this kind of bar graph visualization?

1 Answer 1


If I have understood your question correctly then below design would work for you:

enter image description here

For each selection maintain a breadcrumb and highlight the current selection in whichever way you like, here I have underlined the current active item. so show the visualization for the current active item. breadcrumbs will change according to your tree and user selection.

If user wants to see graph at nth level of your tree he can easily do that by selecting that item in breadcrumb.(If he already selected that in the tree.)

And don't nest the visualizations the way you do for tree which will absolutely kill the user experience. even If you want to opt for another better design (may be) restrict one visualization at a time in view or max two if you are comparing them. because most of the people can concentrate only on one thing at a time, effectively. hope this helps :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.