Bootstrap Row идет за другой строкой, когда CanvasJS рисует график

Question

У меня есть два ряда.Теперь я генерирую граф на основе CanvasJS в верхней строке.Но вторая строка вместо того, чтобы идти вниз по графику, идет за графиком.

Почему это так?

<div class='row'>[Generates the Graph in this]</div>
<div class='row'></div>

Есть ли какое-то решение для этого?

Answer 1

Настройка высоты для диаграммы-контейнера должна работать нормально.

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Column Chart"
  },
  data: [
    {
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    }					
  ]
});

chart.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div class="container">
  <div class="row">
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
  </div>
  <div class="row">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam sem et. Nisl purus in mollis nunc sed id semper. Non consectetur a erat nam. Eget mauris pharetra et ultrices neque ornare aenean. Sed nisi lacus sed viverra. Tincidunt ornare massa eget egestas purus viverra accumsan. Et leo duis ut diam quam nulla porttitor massa. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Neque gravida in fermentum et sollicitudin ac. Lorem sed risus ultricies tristique nulla aliquet enim tortor. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in.</p>
  </div>  
</div>