Chart overflow

• May 2, 2020 at 11:51 pm #29143
  
  afreay

  Hello!

  So I am using MVC and Bootstrap 4.0 to construct a page for a client. I am trying to have it be a responsive page when the page goes down to a size a mobile phone would use. My issue is that for the first div inside of my div with a row class is that it works fine, but when it gets to the CanvasJS object with an id of “bigFiveChart”, it wants to overlap with the code painted at the bottom of the page. Is there any way I can have the chart not overlap with other elements?

  <div class="d-flex justify-content-around mx-3" style="min-height: 400px;">
      <div class="row">
          <div class="col-sm-6">
              <ul class="text-justify">
                  <li>
                      CONTENT
                  </li>
                  <li>
                      CONTENT
                  </li>
                  <li>
                      CONTENT
                  </li>
                  <li>
                      CONTENT
                  </li>
                  <li>
                      CONTENT
                  </li>
              </ul>
              <div class="table">
                  <div class="row">
                      <div class="col-md-6 border-1-s-black font-weight-bold">CONTENT</div>
                      <div class="col-md-6 border-1-s-black font-weight-bold">CONTENT</div>
                  </div>
                  @foreach (var item in Model)
                  {
                      <div class="row">
                          <div class="col-md-6 border-1-s-black py-1">CONTENT</div>
                          <div class="col-md-6 border-1-s-black py-1">CONTENT</div>
                      </div>
                  }
              </div>
          </div>
          <div class="col-sm-6">
              <div id="bigFiveChart"></div>
          </div>
      </div>
  </div>

  May 4, 2020 at 7:45 pm #29151
  
  Vishwas R

  @afreay,

  CanvasJS Chart automatically sets the height and width of the chart according to container’s dimensions. If the values are not set for the chart-container, it takes the default values (500px X 400px).

  Setting height to the chart-container should work fine in your case. If you are still facing any issue, kindly create JSFiddle reproducing the issue and share it with us so that we can look into the code, understand the scenario better and help you out.

  —
  Vishwas R
  Team CanvasJS