CODEWITHSUNDEEP
javascriptcanvaschart.js
Trung Tran
Trung Tran

Reputation: 13721

chartjs - canvas size error

I am using chartjs 2.0 to build charts. I specified my canvas size to be 200 x 200. However, the canvas comes out to be 1218 x 1218... Does anyone know why this is happening? Here's my fiddle:

https://jsfiddle.net/cdxvokw0/

My html:

<canvas id="myChart" width="200" height="200"></canvas>

My javascript:

var dateArray = ['1', '2', '3', '4'];
var data_array = ['10', '20', '30', '40']
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dateArray,
        datasets: [{
            label: '# of Votes',
            data: data_array,
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Probability'
                }
            }]
        }
    }
});

Thanks in advance!

Upvotes: 0

Views: 803

Answers (1)

Gilad Artzi
Gilad Artzi

Reputation: 3084

You need to add responsive: false to you chart configuration

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        ...
    },
    options: {
        responsive: false,
        scales: {
            ...
        }
    }
});

Otherwise, the chart tries to be as large as its container

Upvotes: 2

Related Questions