Question posted in
You can find the official documentation here.

Unable to change size of Chart.js – Jquery ajax

Unable to change size of chart.js on HTML. Have tried to set the canvas parameter along with defining a section and div tag and then explicitly assigning height and width in <style>.
Have also used {responsive: true, maintainAspectRatio: false} yet no luck

Index.html

<html>
    <head>
        <title>Chart EG</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

    </head>
    <body>
        <canvas id="chart" width="50" height="50"></canvas>

        <script type="text/javascript">
            $(document).ready(function(){                
                $.ajax({
                         url: "http://localhost:8050/api/route1",
                         type: 'POST',
                         dataType:'json',                    
                         success: function(res) {
                            console.log(res);
                            divData='';   
                            var myLabels =[];
                            var myData =[];
                            $.each(res, function(key, value) {
                                console.log(key);
                                console.log(value);
                                myLabels.push(key);
                                myData.push(value);
                            });

                            var ctx = document.getElementById("chart");    
                            var myBarChart = new Chart(ctx, {                           
                                type: 'pie',                         
                                data: {
                                    labels: myLabels,
                                    datasets: [{
                                        label: 'Labels',
                                        data: myData,

                                        backgroundColor: [
                                            'rgba(75, 192, 192, 0.2)',
                                            'rgba(100, 200, 300, 0.2)',
                                            'rgba(200, 192, 72, 0.2)',
                                            'rgba(400, 92, 72, 0.2)',
                                            'rgba(255, 99, 132, 0.2)'
                                        ],
                                        borderColor: [
                                            'rgba(75, 192, 192, 1)',
                                            'rgba(175, 300, 192, 1)',
                                            'rgba(275, 92, 192, 1)',
                                            'rgba(100, 10, 200, 1)',
                                            'rgba(255,99,132,1)'
                                        ],
                                        borderWidth: 1
                                    }]
                                },
                                options: {                              
                                    responsive: true,
                                    maintainAspectRatio: false
                                }
                            });    

                            }
                        });    
                    });                           
        </script>
    </body>
</html>

Updated the code with the complete HTML. Ignore this as SO is asking me to add more details (Unable to change size of chart.js on HTML. Have tried to set the canvas parameter along with defining a section and div tag and then explicitly assigning height and width in <style>.)

Tags:

2

Answers


  1. 0

    HTML canvas width and height attributes are element interpreted in CSS pixels but they need to be defined as integer values. Therefore you should remove ‘px‘ from your definitions.

    <canvas id="chart" width="100" height="100"></canvas>
    Login or Signup to reply.
  2. 0

    Here is an HTML code for two canvases of varying sizes. You just need to change the height and width attribute of the canvas tag.

    I have added different colors to the two canvas for diffrentiation

    var canvas1 = document.getElementById("first");
var ctx1 = canvas1.getContext("2d");
ctx1.fillStyle = "blue";
ctx1.fillRect(0, 0, canvas1.width, canvas1.height);

var canvas2 = document.getElementById("second");
var ctx2 = canvas2.getContext("2d");
ctx2.fillStyle = "red";
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
    <canvas id="first" height="100"></canvas>
<canvas id="second" height="200"></canvas>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search