Error width 100% when loading the table with the CanvasJS library

I have a problem using the CanvasJS library. I define the following div:

<div id="resizable" style="height: 300px;">
    <div id="chartContainer1" style="height: 100%; width: 100%;"></div>
</div>

And I add this script before closing the body:

$(document).ready(function () {
    //Better to construct options first and then pass it as a parameter
    var options1 = {
        title: {
            text: "Chart inside a jQuery Resizable Element"
        },
                animationEnabled: true,
        data: [
        {
        type: "column", //change it to line, area, bar, pie, etc
            dataPoints: [
                { y: 10 },
                { y: 6 },
                { y: 14 },
                { y: 12 },
                { y: 19 },
                { y: 14 },
                { y: 26 },
                { y: 10 },
                { y: 22 }
            ]
        }
        ]
    };

    $("#resizable").resizable({
        create: function (event, ui) {
            //Create chart.
            $("#chartContainer1").CanvasJSChart(options1);
        },
        resize: function (event, ui) {
            //Update chart size according to its container's size.
            $("#chartContainer1").CanvasJSChart().render();
        }
    });

});

This is like in the example that comes in the documentation, I have only changed

window.onload = function () {

Because of this:

$(document).ready(function () {

But at the time of loading the page, it does not appear at 100% of width, but only 30% more or less, but if I reduce the size of the window and enlarge it, if it is placed with 100% width . Any idea what the problem may be? Thanks!

The important html content would be like this:

Css of the head

<link href="path_to_folder/css/jquery-ui.min.css" rel="stylesheet" />

Start of the body

<div class="container" style="margin-bottom:20px;margin-top: 20px;">
    <div class="row">
       <div class="col-md-12">
           <div id="resizable" style="height: 300px; width:100%;">
              <div id="chartContainer1" style="height: 100%; width: 100%;"></div>
           </div>
       </div>
   </div>
</div>

The footer would be like that

<script src="path_to_folder/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="path_to_folder/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="path_to_folder/js/jquery.canvasjs.min.js"></script>

And below this is the script that I added above