how to make wider the google orgchart

Question

can I ask some help.How can I make the google org chart looks wider ? I mean the lines are stretching to occupy the space of the container something like this picture below.

EDIT:

Added code

 var dt = new google.visualization.DataTable(data);
                    dt.addColumn('string', 'Name');
                    dt.addColumn('string', 'Manager');
                    dt.addColumn('string', 'ToolTip');

                    dt.addRows(data);




                    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));

                    chart.draw(dt, {allowHtml:true, allowCollapse:false, size:'small', size: 'medium'});

Here is my google orgchart it's not the same to the picture above.

Answer 1

set the size in your div tag:

<div id="chart_div" style="height: 200px; width: 800px"></div>

Answer 2

May i know why have you set 'size' property of google org chart to small as well as medium at the same time ? In your code the size: 'medium' property is overriding the size: 'small' property. You can try size:'large' property. But it will increase the width as well as height of the nodes of org chart.

If you only want to increase the width of all nodes then try overriding the org chart classes :

.google-visualization-orgchart-table tr td.google-visualization-orgchart-node div { width: 250px!important; }

The above solution worked for me.