Prevent size of canvas chart js to equal window height and width

Question

I am using chartjs to display data and the chart (canvas) takes up 100% width and 100% height of the window.

I want to reduce this to be 600px by 600px. To do this I tried using Chart.defaults.global.legend.fullWidth = false; however this didn't work.

I have created a jsfiddle here for your convenience.

See code below:

HTML

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

JS

var ctx = document.getElementById("myChart");
Chart.defaults.global.defaultFontColor = "#000";
Chart.defaults.global.legend.fullWidth = false;
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: labels,
        datasets: [{
            label: '# of Followers',
            data: followers,
            backgroundColor: [
                'rgba(255, 99, 132, 0.9)',
                'rgba(54, 162, 235, 0.9)',
                'rgba(255, 206, 86, 0.9)',
                'rgba(75, 192, 192, 0.9)',
                'rgba(153, 102, 255, 0.9)',
                'rgba(255, 159, 64, 0.9)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 5
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

score 1 · Accepted Answer · answered Oct 11 '16 at 20:26

1

Add 'responsive: false' to the chart options

options: {
        responsive: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }

answered Oct 11 '16 at 20:26

Aniko Litvanyi

2,109
1
21
25

nice! did you see that in the docs, or have you used this library before? – Oct 11 '16 at 20:31
but it is mentioned in the docs too [link](http://www.chartjs.org/docs/#chart-configuration-creating-a-chart-with-options) – Aniko Litvanyi Oct 11 '16 at 20:39
http://stackoverflow.com/questions/39994101/chartjs-show-value-on-pie-chart I have asked another question here if you want to take a look when you get a chance – Oct 12 '16 at 08:38
I checked your other question and if I understand everything correctily it is possible a duplicate of [this](http://stackoverflow.com/questions/33363373/how-to-display-pie-chart-data-values-of-each-slice-in-chart-js) – Aniko Litvanyi Oct 12 '16 at 08:55
it is aniko, thanks! i am trying to implement the solution now. Also, can you see that the label #number of followers isn't showing. You have any idea why? – Oct 12 '16 at 09:09
should this label be the title of the whole chart? – Aniko Litvanyi Oct 12 '16 at 09:28
you see in the datasets where it says `label: '# of Followers'`? I thought this should show the title of the chart. It works for a bar chart but not for a pie chart – Oct 12 '16 at 10:10
1

no, it is a title of a dataset and it cannot be used with pichart. So if you want to add a title to your chart, enable title in the options part of the config `options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] }, title: { display: true, text: 'Custom Chart Title' } }` – Aniko Litvanyi Oct 12 '16 at 10:32

Prevent size of canvas chart js to equal window height and width

1 Answers1