How to Set Bar Width in a Bar Graph ?

Last Updated : 02 Jan, 2024

In the Chart.Js library, we have a Bar Graph to represent the data in the Bar form. The size of the bar is important to maintain the visual appearance of the Chart. We can set the bar width in a Bar graph in a dynamic and real-time way by using various approaches. In this article, we will see these approaches along with their implementation in terms of examples and outputs.

Below are the possible approaches:

Table of Content

Using barThickness Property
Using categoryPercentage Property

CDN link

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Approach 1: Using barThickness Property

In this approach, we are using the barThickness Property to set the bar width for the Bar Graph in Chart.js.
We have taken the input field and a button through which the user can enter the desired bar width and once the button is been clicked, the bar width is adjusted with the entered value.

Syntax:

options: {
  scales: {
    x: {
      beginAtZero: true
    },
    y: {
      beginAtZero: true
    }
  },
  barThickness: 20
}

Example: Below is the implementation of the above-discussed approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Example 1</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Approach 1: Using barThickness Property</h3>
    <label for="barThicknessInput">Bar Thickness:</label>
    <input type="number" id="barThicknessInput" value="80">
    <button onclick="chartUp()">Update Chart</button>
    <canvas id="barChart"></canvas>
    <script>
        let barThicknessValue = 80;
        const data = {
            labels: ['Courses', 'Programming', 'Algorithms',
             'Web Development', 'Data Structures'],
            datasets: [{
                label: 'Monthly Users',
                data: [5000, 8000, 6000, 7000, 9000],
                backgroundColor: 'rgba(75, 192, 192, 0.6)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };
        const config = {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    x: {
                        beginAtZero: true
                    },
                    y: {
                        beginAtZero: true
                    }
                },
                barThickness: barThicknessValue
            }
        };
        const ctx = 
                  document.getElementById('barChart').getContext('2d');
        const myChart = new Chart(ctx, config);
        function chartUp() {
            barThicknessValue = parseInt(document
            .getElementById('barThicknessInput').value, 10) || 80;
            config.options.barThickness = barThicknessValue;
            myChart.update();
        }
    </script>
</body>
 
</html>

Output:

Output1

Approach 2: Using categoryPercentage Property

In this approach, we are using the categoryPercentage property in Chart.JS which allows us to dynamically set the width of bars in the Bar graph.
In the example, we have taken thw input field and button through which the bar width can be adjusted by the user.

Syntax:

options: {
  scales: {
    x: {
      beginAtZero: true
    },
    y: {
      beginAtZero: true
    }
  },
  categoryPercentage: 0.7 
}

Example: Below is the implementation of the above-discussed approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Example 2</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
          Approach 2: Using categoryPercentage Property
      </h3>
    <label for="categoryPercentageInput">
          Bar Width Percentage:
      </label>
    <input type="number" id="categoryPercentageInput"
           value="70">
    <button onclick="chartUp()">Update Chart</button>
    <canvas id="barChart"></canvas>
    <script>
        let categoryPercentageValue = 70;
        const data = {
            labels: ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'],
            datasets: [{
                label: 'Monthly Users',
                data: [5000, 8000, 6000, 7000, 9000],
                backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)',
                    'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)',
                    'rgba(153, 102, 255, 0.6)'],
                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)'],
                borderWidth: 1
            }]
        };
        const config = {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    x: {
                        beginAtZero: true
                    },
                    y: {
                        beginAtZero: true
                    }
                },
                categoryPercentage: categoryPercentageValue / 100
            }
        };
        const ctx = document.getElementById('barChart').getContext('2d');
        const myChart = new Chart(ctx, config);
        function chartUp() {
            categoryPercentageValue = parseInt(document
                .getElementById('categoryPercentageInput').value, 10) || 70;
            config.options.categoryPercentage = categoryPercentageValue / 100;
            myChart.update();
        }
    </script>
</body>
 
</html>

Output:

Output2

Suggest improvement

How to Make a Bar Graph in Excel?

Share your thoughts in the comments

How to Set Bar Width in a Bar Graph ?

CDN link

Approach 1: Using barThickness Property

Syntax:

HTML

Approach 2: Using categoryPercentage Property

Syntax:

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?