Смузи чарт с бутстрапом

Question

Это, вероятно, довольно очевидно, но я пытаюсь поместить диаграмму смузи внутри начальной загрузки col. Диаграмма не расширяется, чтобы заполнить столбец, и я просто получаю небольшую диаграмму с большим количеством дополнительного пространства.

Вот мой текущий код:

<div class="container-fluid">
        <div class="row">
            <div class="col">
                <canvas id="mycanvas" width="100%" height="300px"></canvas>
            </div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
    </div>

JS:

var smoothie = new SmoothieChart({millisPerPixel:25,grid:{millisPerLine:3000,verticalSections:8},timestampFormatter:SmoothieChart.timeFormatter, tooltip: true});
smoothie.streamTo(document.getElementById("mycanvas"), 0);

Я хочу, чтобы диаграмма заполнила оставшееся пространство столбца, есть идеи, что я делаю неправильно?

Answer 1

Для меня создание класса canvasheight , а затем определение высоты в теге Style сработало

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <canvas id="mycanvas" class="canvaswidth" height="300px"></canvas>
        </div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

<style>
.canvaswidth{
   width:100% !important;
}
</style>