Chart.js Charts are not being responsive

Topic: Chart.js Charts are not being responsive

David Gonzalez pro asked 7 years ago

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <div class="row"> <div class="col-xs-2 col-sm-4 col-md-2 col-lg-4"> <span class="min-chart" id="chart-sales" data-percent="56"> THC: <span class="percent">56</span> <canvas height="121" width="121" style="height: 110px; width: 110px;"></canvas> </span> </div> <div class="col-xs-4 col-sm-4 col-md-2 col-lg-4"> <span class="min-chart" id="chart-sales" data-percent="56"> THC: <span class="percent">56</span> <canvas height="121" width="121" style="height: 110px; width: 110px;"></canvas> </span> </div> <div class="col-xs-4 col-sm-4 col-md-2 col-lg-4"> <span class="min-chart" id="chart-sales" data-percent="56"> THC: <span class="percent">56</span> <canvas height="121" width="121" style="height: 110px; width: 110px;"></canvas> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('.min-chart#chart-sales').easyPieChart({ barColor: "#4caf50", onStep: function (from, to, percent) { $(this.el).find('.percent').text(Math.round(percent)); } }); }); </script> The charts are not being responsive. its too big and goes over the col-3 that its under

Add comment

Rafał Rogulski free answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

You can manually set size off chart adding size property to your js:

$(function () {
    $('.min-chart#chart-sales').easyPieChart({
        barColor: "#4caf50",
        size: 200,
        onStep: function (from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

now you must fix lite style using css:

 .min-chart {
    width: 110px;
    height: 110px;
}

.percent {
    line-height: 200px;
}

also, you can remove <canvas height='121' width='121' style='height: 110px; width: 110px;'></canvas>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

David Gonzalez

Pro User 0Support score
2Questions 0Answers 0Snippets