How to position Google.visualization.LineChart correctly inside the div?

July 3, 2022

I’m trying to place the line chart inside the div, but it still leaks below the div.

I’ve already changed the width and top in the options, but it doesn’t seem to have any effect.

How can I fix those graphics that are outside the div to stay inside?

.containerGeral {
  display: grid;
  grid-template-columns: repeat(6, 540px); /* The width */
  grid-auto-rows: 250px; /* The height */
  grid-auto-flow: dense; /*This is the important property*/
  /* The margin */
  grid-gap: 20px;
  padding: 10px;
}

.containerGeral .blocks {
  border-radius: 10px;
  background-color: #2E5173;
}

.containerGeral .blocks::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
}

.big {
  grid-column: span 3;
  /* Take twice the width*/
}

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id="test">
  </div>
  <div class="containerGeral">
  </div>
  <script>
    function draw(id) {
      google.charts.load('current', {
        'packages': ['corechart']
      });
      google.charts.setOnLoadCallback(function() {
        var options = {
          title: 'title',
          curveType: 'function',
          colors: ['#0409BA', '#00930A'],
          lineWidth: 3,
          vAxis: {
            viewWindow: {
              min: 0,
              max: 100
            }
          },
          legend: {
            position: 'bottom'
          },
          top: '0',
          width: '100%',
          heigth: '30'
        };
        var chart = new google.visualization.LineChart(document.getElementById(id));
        var data = google.visualization.arrayToDataTable([
          ['x', 'y'],
          [0, 0],
          [1, 1],
          [2, 3],
          [3, 7],
          [4, 15],
          [5, 31]
        ]);
        chart.draw(data, options);
      });
    }

    for (let i = 0; i < 16; i++) {
      if (i % 6 == 0 && i > 0) {
        var d1 = $('<div class="big blocks" id="a' + i + '">titlee' + i + '</div>').appendTo('.containerGeral')
        var d2 = $('<div class="big blocks" id="b' + i + '">titlee' + i + '</div>').appendTo('.containerGeral')
        continue
      }
      $('<div class="blocks" id="c' + i + '"></div>').appendTo('.containerGeral')
      draw('c' + i)
    }
  </script>
</body>

</html>

>Solution :

Remove the pseudo element ::before

.containerGeral .blocks::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
}

Here is a snippet

function draw(id) {
  google.charts.load('current', {
    'packages': ['corechart']
  });
  google.charts.setOnLoadCallback(function() {
    var options = {
      title: 'title',
      curveType: 'function',
      colors: ['#0409BA', '#00930A'],
      lineWidth: 3,
      vAxis: {
        viewWindow: {
          min: 0,
          max: 100
        }
      },
      legend: {
        position: 'bottom'
      },
      top: '0',
      width: '100%',
      heigth: '30'
    };
    var chart = new google.visualization.LineChart(document.getElementById(id));
    var data = google.visualization.arrayToDataTable([
      ['x', 'y'],
      [0, 0],
      [1, 1],
      [2, 3],
      [3, 7],
      [4, 15],
      [5, 31]
    ]);
    chart.draw(data, options);
  });
}

for (let i = 0; i < 16; i++) {
  if (i % 6 == 0 && i > 0) {
    var d1 = $('<div class="big blocks" id="a' + i + '">titlee' + i + '</div>').appendTo('.containerGeral')
    var d2 = $('<div class="big blocks" id="b' + i + '">titlee' + i + '</div>').appendTo('.containerGeral')
    continue
  }
  $('<div class="blocks" id="c' + i + '"></div>').appendTo('.containerGeral')
  draw('c' + i)
}

.containerGeral {
  display: grid;
  grid-template-columns: repeat(6, 540px);
  /* The width */
  grid-auto-rows: 250px;
  /* The height */
  grid-auto-flow: dense;
  /*This is the important property*/
  /* The margin */
  grid-gap: 20px;
  padding: 10px;
}

.containerGeral .blocks {
  border-radius: 10px;
  background-color: #2E5173;
}

.big {
  grid-column: span 3;
  /* Take twice the width*/
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="test">
</div>
<div class="containerGeral">
</div>