Binding Chart to Canvas height width

Question

I am using Chart.js with the following html:

<canvas id="fisheye" width="100" height="100" style="border:1px solid;"></canvas>

And this is the Javascript part :

getChart: function () {
        var ctx = document.getElementById("fisheye");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["json1", "json2", "json3", "json4"],
                datasets: [{
                    label: '1.3.0 Version',
                    type: 'bar',
                    data: [52.4060092977, 90.0854057722, 196.576968515, 77.6216726434],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)'
                        // 'rgba(54, 162, 235, 0.2)',
                        // 'rgba(255, 206, 86, 0.2)',
                        // 'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(255,99,132,1)',
                        'rgba(255,99,132,1)',
                        'rgba(255,99,132,1)'
                        // 'rgba(54, 162, 235, 1)',
                        // 'rgba(255, 206, 86, 1)',
                        // 'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                },
                {
                    label: '1.3.13 Version',
                    type: 'bar',
                    data: [50.0744953192, 93.5542439586, 153.288788005, 101.402897964],
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(54, 162, 235, 0.2)'
                        // 'rgba(255, 206, 86, 0.2)',
                        // 'rgba(75, 192, 192, 0.2)',
                        // 'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(54, 162, 235, 1)'
                        // 'rgba(255, 206, 86, 1)',
                        // 'rgba(75, 192, 192, 1)',
                        // 'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: 'Export Chart'
                },
                legend: {
                    display: true,
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            stepSize:50
                        }
                    }]
                },
                responsive: true
            }
        });
        return myChart;
    }

My problem is that my chart seems to expand to full screen height and width. I would like to restrict my chart size to the canvas size. This way I can lay charts in a grid rather than per page (Note: I have shown code for only one chart, but you can imagine it to be similar for other charts)

score 1 · Accepted Answer · answered Nov 21 '16 at 15:51

1

It might be easier to wrap the canvas in a div/span/something and set the size there. As you have set responsive: true this means that chart.js tries to fill the parent on resize and it does this by setting the canvas height and width. https://jsfiddle.net/zpvfph9m/1/

<div style="width:50%">
   <canvas id="fisheye" width="400" height="400"></canvas>
</div>

Would this work for you?

answered Nov 21 '16 at 15:51

Tom Glover

2,996
23
23

how would I externalize dataset to some file. There is lot of duplication there and I would like to externalise data block in the code above to separate file. Code hints appreciated. I am newbie to Javascript :( – katch Nov 21 '16 at 16:06
ok I externalised using another javascript. I have added sudo code there in same jsfiddle function () { return { data : function(){ var data = { ...} return data }, options: function(){ var option = { ... } return option } } } – katch Nov 21 '16 at 16:41
Struggled a bit in understanding what you wanted. This is how I interpreted it. If I wanted to separate the options, data and remaining config in 3 different files, you would create them in 3 different js files and then concatenate them all to the same file before putting the code on the server/virtual server. f.exs. Using one of these: http://stackoverflow.com/questions/301442/how-do-i-concatenate-javascript-files-into-one-file Then you get the advantage of having the source code separated, but you don't have the performance loss of 3 requests in the browser. – Tom Glover Nov 21 '16 at 19:31
I'm not sure how to segregate into different js files in jsfiddle without using ajax which is very heavy handed. What you might want to do though is to parameterize the create graph a bit. https://jsfiddle.net/zpvfph9m/3/ – Tom Glover Nov 21 '16 at 19:39

Binding Chart to Canvas height width

1 Answers1