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

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 >
  </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  id="a'   i   '">titlee'   i   '</div>').appendTo('.containerGeral')
        var d2 = $('<div  id="b'   i   '">titlee'   i   '</div>').appendTo('.containerGeral')
        continue
      }
      $('<div  id="c'   i   '"></div>').appendTo('.containerGeral')
      draw('c'   i)
    }
  </script>
</body>

</html>

CodePudding user response：

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  id="a'   i   '">titlee'   i   '</div>').appendTo('.containerGeral')
    var d2 = $('<div  id="b'   i   '">titlee'   i   '</div>').appendTo('.containerGeral')
    continue
  }
  $('<div  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 >
</div>