Topic: Chart.js Charts are not being responsive

David Gonzalez pro asked 5 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

Rafał Rogulski free answered 5 years ago


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>

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

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