Chartjs.org Bar chart not scale properly

Question

I have a chart bar below:

And I wrapped it in a bootstrap columns: col-lg-6 col-md-6 col-sm-6

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="panel panel-default">
            <div class="panel-heading"><i class="fa fa-database"></i> Web API Requests
            </div>
            <div class="panel-body">
                <canvas id="barRequests" legend="false" class="chart chart-bar" data="requestsData" labels="requestsLabels" options="requestsOptions"></canvas> 
            </div>
        </div>
    </div>
</div>

The issue is on resizing the browser, the graph most of the times comes as below:

What have I done wrong?

Check the height attributes of the elements, or if they are floated. It appears that the collapsed appearance of your chart can be due to (1) a fixed height or (2) a floated element, which means the parent will have collapsed dimensions as floated elements are taken out of the normal layout flow. — Terry, Nov 20 '16 at 23:51

score 0 · Answer 1 · answered Nov 21 '16 at 00:42

I found the answer myself, wanted to update the post for others just in case if someone having the same issue.

Apparently that was an issue that is resolved with the latest version regarding auto scaling the charts. I updated to https://github.com/chartjs/Chart.js/releases/tag/v2.4.0 and everything works fine.

Chartjs.org Bar chart not scale properly

1 Answers1