Posted in Uncategorized

Chart.js + Boostrap panel

   February 24, 2021  1 Comment on Chart.js + Boostrap panel

Hello,

I’m having some difficulty displaying a chart inside a Bootstrap panel. If I place a basic line chart alone it works fine:

    <canvas id="memoryTrendChart" width="100" height="50"></canvas>

    var lineChartData = {
        labels: ['', '', '', ''],
        datasets: [{
            label: "Memory Usage",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [13, 56, 45, 34]
        }, {
            label: "Base Usage",
            fillColor: "rgba(246,150,121,0.2)",
            strokeColor: "rgba(242,108,079,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [15, 18, 35, 66]
        }]
    }

    //Get the context of the canvas element we want to select
    var ctx = $("#memoryTrendChart").get(0).getContext("2d");
    // This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx).Line(lineChartData, {
        animationSteps: 15,
        bezierCurve: false,
        pointDot: false,
        showScale: false,
        scaleShowLabels: false,
        showTooltips: false,
        tooltipTemplate: "<%%if (label){%%><%%=label%%> (<%%}%%><%%= value %%> MB)",
        responsive: true
    });

However, placing it within a Bootstrap panel doesn’t work as I would expect. The chart will not be displayed:

    <div class="panel panel-success">
        <div class="panel-heading">
             <h3 class="panel-title">Memory Trend</h3>

        </div>
        <div class="panel-body">
            <canvas id="memoryTrendChart" width="100" height="50"></canvas>
        </div>
    </div>

Also, I noticed that it’s very difficult to get the width/height right even when in “standalone” mode. Looks like with larger values it works fine, but with smaller ones it does not (i.e. {width: 100, height: 50}) The documentation implies that the dimensions should be placed in the tag, but I’m not having much luck with it.

What am I missing? Thanks!

Author: Fantashit

1 thought on “Chart.js + Boostrap panel”

  1. I’ve solved the problem:

    Use this code:

    <div class="panel-body">
    <div>
        <canvas id="myChart"></canvas>
    </div>
</div>

    Instead of this:

    <div class="panel-body">
    <canvas id="myChart"></canvas>
</div>

Comments are closed.