Chart.js + Boostrap panel

[tciuro]

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!

[tciuro]

After trying many options, I haven been able to make it work! Here's the example in JSFiddle.

I still have the issue where I'm unable to specify the size of the chart to fit neatly within the panel. Any ideas?

[rizqinizamil]

It also can't be displayed on bootstrap modal when responsive option is true.
Unless you resize the browser, chart will display correctly.

[voidale]

I'm also trying to put it into a bootstrap panel but overall it's really messy responsive is kinda buggy can't get the width height right, And also this js plugin seems like it's abandoned too bad really it's a nice script!

UPDATE: maintainAspectRatio: false magic worker:)

[Teddy95]

+1

[Teddy95]

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>

[tciuro]

@Teddy95 definitely solves the problem for me as well. Thanks for the help!

[jtblin]

https://github.com/nnnick/Chart.js/pull/851 fixes the root cause and avoid having to add the empty div container.

[fulldecent]

Duplicate #507