Search code examples
javascriptjquerygraphtreeecharts

In Apache E Charts left to right tree chart, how to dynamically calculate the correct height and width of the container div?


In Apache E Charts left to right tree chart

https://echarts.apache.org/examples/en/editor.html?c=tree-basic

The tree becomes very clumsy if there are large number of nodes such as 200 something nodes. Nodes overlap. If the container div width and height are set as 1200px around, then Nodes draw correctly without overlap.

However this solution draws too much blank div, if the graph has only 10 nodes.

How to dynamically calculate the container Div size so that just enough size Div is created and nodes dont overlap, I am using this echarts javascript library on a PHP script?

Is there a zoomin option available?


Solution

  • You can use hide overlapped labels and there is a zooming option available. I dont think changing the container size is the best way to approach your issue. Alternatively, you can adjust the size and position of the treemap.