Chart.js size not adapting to div

Question

I have tried so many things (modify css, add inline css to canvas, add inline css to a wrapper div of canvas) but I still can't make the chart fit in the panel properly.

Here is the HTML

        <section class="panel">
            <header class="panel-heading">
                Temp
            </header>
                <canvas id="tempChart"></canvas>
        </section>

Here is the js code

<script>

var data = {
    labels: ["January", "Aary", "March", "April", "May", "June"],
    datasets: [{
        label: "My First dataset",
        fillColor: 'rgba(220,220,220,0)',
        strokeColor: "rgba(220,220,220,1)",
        pointColor: 'red',
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    } ]
};

var option = {
    responsive: true,

};

var ctx = $("#tempChart").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, option);

The class panel in CSS contains only graphic things such as border background color and so on. By the way I am using Bootstrap grid. Thanks for your help.

have you tried to set all your charts responsive with default value : Chart.defaults.global.responsive = true; — aorfevre
– aorfevre, Commented Jun 8, 2017 at 21:14
Have you tried ctx.height and ctx.width propert? like: ctx.height = 20; ctx.width = 80; It will set width and height for your canvas element. — J.Joseph
– J.Joseph, Commented Jun 9, 2017 at 6:25

aorfevre · Accepted Answer · 2017-06-08 21:17:23Z

0

have you tried to set all your charts responsive with default value : Chart.defaults.global.responsive = true;

Your global synthax seems correct has you setted up

var options = { responsive:true }

However; it's a tiny detail but you added a coma after that true. I suggest to remove it.

as @brian suggested; please; inform us the version of the lib. Add a jsfindle is even better

answered Jun 8, 2017 at 21:17

aorfevre

5,0744 gold badges23 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Massimo Lavermicocca · Accepted Answer · 2017-06-10 17:33:11Z

0

Thanks for all the replies. The problem was the version of lib I was using. Updating that solved the problem.

answered Jun 10, 2017 at 17:33

Massimo Lavermicocca

1931 gold badge5 silver badges12 bronze badges

Collectives™ on Stack Overflow

Chart.js size not adapting to div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related