Search code examples
javascripthtmlcsstwitter-bootstrapsmoothie.js

Smoothie chart with bootstrap

This is probably pretty obvious but I am trying to put a smoothie chart inside of a bootstrap col. The chart doesn't expand to fill the column and I'm simply getting a small chart with lots of extra space.

Here is my current code:

<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);

This is the output

I want the chart to fill the rest of the column space, any idea what I'm doing wrong?

Solution

  • For me creating a class as canvasheight and then defining height in Style tag worked 

    <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>