How to change Google Organization Chart link line color & thickness?

Question

I am fiddling around with google's organization chart in javascript but I can't figure out how to change the link lines' color and thickness. The documentation only talks about styling the nodes but there is nothing about the links connecting them.

How do I style the links?

Answer 1

there are no config options for the lines connecting the nodes

but you can override the css used to style those lines

here, the thickness and color is changed using css border properties

#chart_div .google-visualization-orgchart-linebottom {
  border-bottom: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-lineleft {
  border-left: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-lineright {
  border-right: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-linetop {
  border-top: 4px solid magenta;
}

see following working snippet...

google.charts.load('current', {
  packages: ['orgchart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Manager');
  data.addColumn('string', 'ToolTip');
  data.addRows([
    [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
     '', 'The President'],
    [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
     'Mike', 'VP'],
    ['Alice', 'Mike', ''],
    ['Bob', 'Jim', 'Bob Sponge'],
    ['Carol', 'Bob', '']
  ]);

  var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  chart.draw(data, {allowHtml:true});
});

#chart_div .google-visualization-orgchart-linebottom {
  border-bottom: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-lineleft {
  border-left: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-lineright {
  border-right: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-linetop {
  border-top: 4px solid magenta;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>