How do I make the lead lines shorter and the boxes smaller in an org chart

Masheika Allen

unread,

May 19, 2016, 4:56:17 PM5/19/16

to Google Visualization API

I've drafted an org chart but it contains a lot of white space. The lines between the nodes are noticeably long. I'd like to shorten them but don't know how. Also, the chart would look a bit neater if the boxes were shorter and wider. Is there any way to manipulate the size and shape of the boxes?

Here's a sample of my code:

<html>

<head>

google.charts.load('current', {packages:["orgchart"]});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Name');

data.addColumn('string', 'Manager');

data.addColumn('string', 'ToolTip');

// For each orgchart box, provide the name, manager, and tooltip to show.

data.addRows([

[{v:'RL', f:'RNDL'},

'', ''],

[{v:'Mgr', f:'<a href="https://" target="_blank">NDM</a>'},

'RL', ''],

[{v:'PML', f:'<a href="https://" target="_blank">PML</a>'},

'Mgr', ''],

[{v:'PM', f:'<a href="https:// target="_blank">PM</a>'}, 'PML', ''],

['SPM', 'PM', ''],

['<a href="https://" target="_blank">ADM</a>', 'SPM', ''],

[{v:'FOM', f:'<a href="https://" target="_blank">MOM</a>'},

'Mgr', ''],

[{v:'MCC', f:'<a href="https://" target="_blank">MCC</a>'}, 'FOM', ''],

[{v:'MCM', f:'<a href="https://"_blank">MCM</a>'}, 'MCC', ''],

['<a href="https://"_blank">FDM</a>', 'MCM', ''],

[{v:'CL', f:'<a href="https://" target="_blank">CL</a>'},

'Mgr', ''],

[{v:'CM', f:'<a href="https://"_blank">CM</a>'}, 'CL', ''],

[{v:'DM', f:'<a href="https://" target="_blank">DM</a>'}, 'CM', ''],

['FM, 'DM', '']

]);

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

chart.draw(data, {allowHtml:true});

}

</script>

<style>

table{

border-collapse: separate !important;

}

</style>

</head>

<body>

</body>

</html>

The <style> info was added to get rid of the blue lead lines that were rendering in error. I've read a bit about possibly using the "chart_div" to style the nodes? But I don't know how that would work (what it would look like).

Masheika Allen

unread,

May 20, 2016, 4:50:08 PM5/20/16

to Google Visualization API

The length of the lines is the more troubling issue. I think I'm looking for instruction in using <line-height> or .google-visualization-orgchart-linenode?

Masheika

Masheika Allen

unread,

May 23, 2016, 6:21:34 PM5/23/16

to Google Visualization API

I was able to make the lines a bit more reasonable using the following code:

.google-visualization-orgchart-linenode {

line-height: .2;

}

.google-visualization-orgchart-lineleft {

border-left: 2px solid #333!important; line-height: .2;

}

.google-visualization-orgchart-linebottom {

border-bottom: 2px solid #333!important; line-height: .2;

}

.google-visualization-orgchart-lineright {

border-right: 2px solid #333!important; line-height: .2;

}

But I still can't fully control the sizing.

David Navarro

unread,

Jun 3, 2020, 1:52:15 AM6/3/20

to Google Visualization API

Hi Masheika, is there a way to increase the space between nodes horizontally?

Reply all

Reply to author

Forward