Google chart legends – Overlapping text

by

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>

More Related Contents:

  1. How can I attach the image or icon on edge of google line chart
  2. Can Google Charts support dual y-axis (v-axis)?
  3. PHP MySQL Google Chart JSON – Complete Example [closed]
  4. Google Chart draw Trendlines with date on x axis
  5. How to write your own custom legends for google line chart/ Google line chart legend manipulation
  6. Google Apps Script: How to set “Use column A as labels” in chart embedded in spreadsheet?
  7. Google Bar Chart cannot Change Individual Bar Color
  8. variable background colors in google line chart
  9. How to add colors to spefic columns in Google Charts
  10. Google Charts: Drawing Multiple Bar Charts with dual axis in IE
  11. How do I align date and values to gridlines in Google Chart?
  12. Chart.js how to get Combined Bar and line charts?
  13. How to create a 3d / surface chart with JavaFX?
  14. Swift – Create charts(bar, line, pie, column) programatically [closed]
  15. Gantt charts with R
  16. New asp.net charting controls – will they work with MVC (eventually)?
  17. Inline labels in Matplotlib
  18. How do you create a family tree in d3.js?
  19. I want to change the chart for each city or subcity selected
  20. Click events on Pie Charts in Chart.js
  21. Apache poi Excel line chart points
  22. How to set axis’ labels in a Line Chart using Apache Poi
  23. Remove x-axis label/text in chart.js
  24. Selecting specific values on a Chart
  25. How can I change charts generated by apache poi to not use smoothed lines and show empty cells as gaps?
  26. How to have actual values in matplotlib Pie Chart displayed
  27. Create Chart from Array data and not range
  28. google visualization-Click event
  29. VBA: Modify chart data range
  30. How can I fill the area(s) between two Series of Splines or Lines

Leave a Comment