Why is Chrome showing extra line when using Google org chart?

Question

I am using Google org chart and it works great on every browser except Chrome. On Chrome I see these extra lines in between the boxes like this:

For all other browsers, the same page shows up as this:

As you can see there are no blue lines in between the nodes. When I look in firebug or chrome dev tools it appears that its:

.google-visualization-orgchart-node

border: 2px solid #b5d9ea;

That is causing the issue because if i change the border to 0px then the issue goes away (but the border on the actual nodes also goes away which is obviously an issue.

Any suggestion for how to render this correctly in Chrome. I don't see this issue happening in the demo link above.

Answer 1

In my case it was Bootstrap 3 with

border-collapse: collapse;

that was the cause. Fixed it with setting

table.google-visualization-orgchart-table {
    border-collapse: separate;
}

Answer 2

.google-visualization-orgchart-linenode {
    border: 0;
}

Answer 3

检查您是否为此css类.google-visualization-orgchart-linenode应用了任何边界规则

Answer 4

I would try Patrick's answer of setting the .google-visualization-orgchart-linenode {border: 0} . If that doesn't work try setting the border-collapse property since its separate by default .

.google-visualization-orgchart-table,
.google-visualization-orgchart-table tr,
.google-visualization-orgchart-table td {
   border-collapse: collapse;
}

Although that's weird that its only showing in Chrome for you. Make sure you have your DOCTYPE setup correctly .

Answer 5

Set the nodeClass option on the chart.draw with a color and background-color to override the default color scheme, which solves the problem in Chrome.

Set two css classes:

//css class for default tree node
.default-leaf { color:black; background-color:#DCDCDC; }

// css class for selected tree node
.selected-leaf { color:white; background-color:#191970; }

While initializing the chart set the nodeClass & selectedNodeClass options:

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

// setting options - allowHtml (required for visuals to work), css classes for a tree-node & selected-tree-node
var options = { 'allowHtml': true, 'nodeClass': 'default-leaf', 'selectedNodeClass': 'selected-leaf'};
chart.draw(data, options);

Answer 6

This is what I added to stop the random lines from showing up

<style>
    table{
        border-collapse: separate !important;
    }
</style>

Answer 7

We had an incompatibility with normalize.css that caused this same issue for us. Adding the following CSS fixed it:

table.google-visualization-orgchart-table {
  border-collapse: inherit;
}

Answer 8

I also added the following to fix the issue:

table {
border-collapse: separate!important; 
}