morris js can't be full width in bootstrap modal

Question

image

my element bootstrap is kura_s and my modal body :

<div class="modal-body">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div id="line-chart" style="height: 300px;width:700px;">
            </div>
          </div>
        </div>
      </div>

js

$('#kurva_s').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    // Button that triggered the modal
    var id_spk = button.data('whatever');

    $(function () {


      $('#line-chart').empty();

      var data = [
        {"m":"2022-01-15","r":0,"p":13.33},
        {"m":"2022-01-22","r":10,"p":60},
        {"m":"2022-01-29","r":15,"p":100},
        {"m":"2022-02-05","r":35,"p":100},
        {"m":"2022-02-12","r":50,"p":100},
        {"m":"2022-02-19","r":55,"p":100}
      ];
      
      var chart = Morris.Line({
            element: 'line-chart',
            data: data, // Set initial data (ideally you would provide an array of default data)
            xkey: 'm', // Set the key for X-axis
            ykeys: ['r','p'], // Set the key for Y-axis
            labels: ['Real','Plan'], // Set the label when bar is rolled over
            stacked: true,
            barGap:10,
            barSizeRatio:1,
        });

    });
  });

like the image that I pinned, morris jus can't be full even though I have set the width manually. Has anyone experienced like me. ?

Answer 1

Going with the example fiddle you posted in the comments, it would appear that the problem occurs when initializing the graph before the modal is open. If you were to change your logic a bit, and initialize the graph on modal opening, the problem would be solved.

Please see the following reworking of your example fiddle.

$("#kurva_s").on("shown.bs.modal",function() {
  $('#line-chart').empty();

  var data = [
    {"m":"2022-01-15","r":0,"p":13.33},
    {"m":"2022-01-22","r":10,"p":60},
    {"m":"2022-01-29","r":15,"p":100},
    {"m":"2022-02-05","r":35,"p":100},
    {"m":"2022-02-12","r":50,"p":100},
    {"m":"2022-02-19","r":55,"p":100}
  ];

  var chart = Morris.Line({
    element: 'line-chart',
    data: data, // Set initial data (ideally you would provide an array of default data)
    xkey: 'm', // Set the key for X-axis
    ykeys: ['r','p'], // Set the key for Y-axis
    labels: ['Real','Plan'], // Set the label when bar is rolled over
    stacked: true,
    barGap:10,
    barSizeRatio:1,
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#kurva_s">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="kurva_s" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div id="line-chart" style="height: 300px;width:100%;">
      </div>
    </div>
  </div>
</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

This is the key part.

$("#kurva_s").on("shown.bs.modal",function() {
    // the rest of your graph code
});

This tells your graph to:

• once the modal is shown, clear whatever was rendered before
• render the graph again, with the available data

This will also allow you to work with dynamic data (if you ever encounter a need for that) - if your data comes from an API call, for example, or you're getting it from an AJAX call to your backend, or the data needs to be graphed based on what was selected before opening the modal, etc.