Google chart legends - Overlapping text - charts

Question

I'm using google chart in my page but the legend text is Overlapped, as the image bellow:
This is my code:
var dataTable = new google.visualization.DataTable();
dataTable.addColumn("date", "Data");
dataTable.addColumn("number", "Ton./Hora");
dataTable.addColumn("number", "Ton./Hora Equiv.");
dataTable.addColumn("number", "Peso (Ton.)");
for (var i = 0; i < dados.length; i++) {
var temp = new Date(dados[i].DT_FIM);
dataTable.addRow([new Date(temp.getFullYear(), temp.getMonth())
,dados[i].TON_HORA
,dados[i].TON_HORA_EQUIV
,dados[i].PES_LIQUI_UNMET]);
}
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM/yyyy"
});
date_formatter.format(dataTable, 0);
var options = {
hAxis: {title: 'Período (mês/ano)'},
series: {0: {type: 'line', targetAxisIndex:0},
1: {type: 'line', targetAxisIndex:0},
2: { type: 'bars', targetAxisIndex: 1 }
},
legend: { position: "top", textStyle: { fontSize: 14 } },
width: 1200,
height: 500
};
var chart = new google.visualization.ComboChart(document.getElementById("div-Equipamento-Produtividade"));
chart.draw(dataTable, options);
My charts is on bootstrap tab nav:
<div id="div-Graficos" class="panel-collapse in">
<div class="panel-body">
<ul id="tab-Graficos" class="nav nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">Equipamento - OEE</li>
<li role="presentation">Equipamento - T2</li>
<li role="presentation">Equipamento - Produtividade</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="div-Grafico-OEE">
<div id="div-Equipamento-OEE" style="width: 900px; height: 500px"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="div-Grafico-T2">
<div id="div-Equipamento-T2" style="width: 900px; height: 500px"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="div-Grafico-Produtividade">
<div id="div-Equipamento-Produtividade" style="width: 1200px; height: 500px"></div>
</div>
</div>
</div>
</div>
I tried to change the position to "bottom" but the problem continue
What i'm making wrong?

Answer 1

check that the chart is not being drawn while hidden
see the following snippet, the chart is hidden by default,
then shown once the chart's 'ready' event fires
notice, it produces the same result as posted in the question...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn("date", "Data");
dataTable.addColumn("number", "Ton./Hora");
dataTable.addColumn("number", "Ton./Hora Equiv.");
dataTable.addColumn("number", "Peso (Ton.)");
for (var i = 0; i < 12; i++) {
var temp = new Date();
dataTable.addRow([new Date(temp.getFullYear(), i)
,(i + 2) * 6
,(i + 1) * 12
,(i + 0) * 18]);
}
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM/yyyy"
});
date_formatter.format(dataTable, 0);
var options = {
hAxis: {title: 'Período (mês/ano)'},
series: {0: {type: 'line', targetAxisIndex:0},
1: {type: 'line', targetAxisIndex:0},
2: { type: 'bars', targetAxisIndex: 1 }
},
legend: { position: "top", textStyle: { fontSize: 14 } },
width: 1200,
height: 500
};
var container = document.getElementById("div-Equipamento-Produtividade");
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
container.style.display = null;
});
chart.draw(dataTable, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div-Equipamento-Produtividade" style="display: none;"></div>
however, if the container is shown before drawing the chart,
the legend turns out nicely...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn("date", "Data");
dataTable.addColumn("number", "Ton./Hora");
dataTable.addColumn("number", "Ton./Hora Equiv.");
dataTable.addColumn("number", "Peso (Ton.)");
for (var i = 0; i < 12; i++) {
var temp = new Date();
dataTable.addRow([new Date(temp.getFullYear(), i)
,(i + 2) * 6
,(i + 1) * 12
,(i + 0) * 18]);
}
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM/yyyy"
});
date_formatter.format(dataTable, 0);
var options = {
hAxis: {title: 'Período (mês/ano)'},
series: {0: {type: 'line', targetAxisIndex:0},
1: {type: 'line', targetAxisIndex:0},
2: { type: 'bars', targetAxisIndex: 1 }
},
legend: { position: "top", textStyle: { fontSize: 14 } },
width: 1200,
height: 500
};
var container = document.getElementById("div-Equipamento-Produtividade");
container.style.display = null;
var chart = new google.visualization.ComboChart(container);
chart.draw(dataTable, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div-Equipamento-Produtividade" style="display: none;"></div>

Answer 2

Every framework or code that hides the chart DIV using "display: none" will make legends to overlap when the chart is draw inside an inactive DIV.
Hidding the chart DIV with "visibility: hidden" works fine, with no overlapping.
I had this issue and only solved it coding the NAV features by myself, without using Bootstrap/JQuery/etc...