Caprica Software

React Org Chart Tutorial


Unfortunately making a fully responsive chart for all device sizes from desktop to mobile is not so easy.

This component uses, potentially deeply, nested HTML tables to layout the chart. This approach does not lend itself well to making responsive charts. Charts also tend to be rather wide.

What should the responsive behaviour of a large organisation chart be? Scaling down node sizes or font sizes does not really make sense. Perhaps more use of stacking may help. Maybe even a completely different chart should be presented on small devices, or maybe no chart at all and instead some other type of presentation.

In any case, it is a difficult problem without a universal solution.

So the bad news is that there is nothing in the core chart components themselves to deal with making the generated charts responsive. We leave it up to you to sort out, sorry!