Open In App

How to Set Height and Width of a Chart in Chart.js ?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Chart.js is a popular JavaScript library that allows developers to create interactive and visually appealing charts for web applications. One of the key aspects of chart customization is controlling its dimensions. In this article, we'll explore how to set the height and width of a Chart.js chart.

Chart.js CDN link

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

Approach 1: By using the Custom style

We can set the height and the width as CSS properties for the container containing the canvas of our chart inside the css code.

Example: The below code will explain the use of the Custom style to set the height and the width of the chart.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js - Set Height and Width</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
            font-family: 'Arial', sans-serif;
        }
        .chart-container {
            width: 30vw;
            height: 40vh;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        canvas {
            display: block;
        }
        h1 {
            color: #2f8d46;
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div>
        <h1>GeeksForGeeks Chart Example</h1>
        <div class="chart-container">
            <canvas id="myChart"></canvas>
        </div>
    </div>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My Dataset',
                    data: [65, 71, 62, 81, 34, 55, 47],
                    backgroundColor: '#2f8d46', 
                    borderColor: '#1b5e20',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>

Output:

Height-and-Width-of-a-Chart-1
Output1

Approach 2: By setting height and width as attribuutes

We can set the height and the width by passing them as attributes directly to the canvas of our chart. We also have to set responsive to false within options for width to work correctly.

Syntax:

 <canvas id="myChart" height="200" width="500"></canvas>
// In Options
options: {
      responsive: false,
}

Example: The below example will show how you can set height nad width of the chart using the attributes.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js - Set Height and Width</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
            font-family: 'Arial', sans-serif;
        }
        .chart-container {
            width: 600px;
            height: 300px;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        canvas {
            display: block;
        }
        h1 {
            color: #2f8d46; 
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <h1>GeeksForGeeks Chart Example</h1>
        <canvas id="myChart" width="600" height="300"></canvas>
    </div>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My Dataset',
                    data: [65, 71, 62, 81, 34, 55, 47],
                    backgroundColor: '#2f8d46', 
                    borderColor: '#1b5e20',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>

Output:

Height-and-Width-of-a-Chart-2
Outpu2

Appraoch 3: Using .resize() method

we can use .resize(width, height) method to resize our chart by invoking it using the two parameters as height and the width.

Syntax: 

function resize() {
  myChart.resize(600, 450);
};

Example: The below code example uses the resize() method to set height and width of the chart in chart.js.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
            font-family: 'Arial', sans-serif;
        }
        .chart-container {
            width: 700px;
            height: 450px;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        canvas {
            display: block;
        }
        h1 {
            color: #2f8d46; 
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <h1>GeeksForGeeks Chart Example</h1>
        <canvas id="myChart"></canvas>
    </div>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5],
                    backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4caf50'],
                    borderColor: ['#ff6384', '#36a2eb', '#ffce56', '#4caf50'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        function resize() {
            myChart.resize(600, 450);
        }
        resize();
    </script>
</body>
</html>

Output:

Height-and-Width-of-a-Chart-3
Output3

Next Article
Introduction to JavaScript

R
rudra1807raj
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox