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
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=
</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:
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=
</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: