Google chart legends - Overlapping text

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"><a href="#div-Grafico-OEE" aria-controls="div-Grafico-OEE" role="tab" data-toggle="tab">Equipamento - OEE</a></li>
      <li role="presentation"><a href="#div-Grafico-T2" aria-controls="div-Grafico-T2" role="tab" data-toggle="tab">Equipamento - T2</a></li>
      <li role="presentation"><a href="#div-Grafico-Produtividade" aria-controls="div-Grafico-Produtividade" role="tab" data-toggle="tab">Equipamento - Produtividade</a></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?

Anselmo

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>

Chelton

You're correct. But I can't hide the chart? I will edit my post and add the html code. – Anselmo

can you wait until the tab is selected to draw the chart? – Chelton

Currently the data is returned from an Ajax call, and I fill in all the charts from the same result ... Unless I store the result in session storage ... – Anselmo

I change my code and i'm drawing the chart when the user click in the specific tabe, but the problem continue... Event: $('.list-group li').click(function(e) { – Anselmo

once you draw the chart hidden, re-drawing won't help. needs to wait until displayed for first initial draw. -- normally hard-coding the width resolves this issue, but not the case here. tried several options to fix but nothing works... – Chelton

This just saved the day. Excellent answer ! – Litchi

I know this is an older answer, but I am hoping you can help me out here #45719654 – Graiggrail

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...

Amalamalbena