I need help on bar thickness using chart.js v3.5 Issue: I set the bar thickness "barThickness: 55," and after in responsive I don't know to manage it in responsive here is my code which I have used, Please let me know what should I do for the solution. Thanks.
Here I Have the issue which is created in responsive, have a look on the image url : image link
var myNewChartB = new Chart(ctx, {
type: "bar",
data: barData,
options: {
borderSkipped: false,
borderRadius: 3,
plugins: {
barRoundness: 1,
legend: {
display: false,
},
title: {
font: {
size: 16
},
display: true,
text: 'Researchers (n=3)',
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
datalabels: {
display: true,
clamp: true,
formatter: (val, context) => (`${val}%`),
anchor: 'start',
align: 'end',
}
},
responsive: true,
tooltips: {
enabled: false,
},
barThickness: 55,
maintainAspectRatio: false,
scales: {
x: {
display: true,
title: {
font: {
size: 16,
},
display: true,
text: "Scroes (1-9)",
},
grid: {
display: false,
drawBorder: false, //<- set this
},
},
y: {
display: true,
ticks: {
display: false
},
title: {
font: {
size: 16
},
display: true,
text: "% of Respondants",
},
grid: {
color: '#9B9898',
drawBorder: false, //<- set this
},
},
},
},
});
I need help on bar thickness using chart.js v3.5 Issue: I set the bar thickness "barThickness: 55," and after in responsive I don't know to manage it in responsive here is my code which I have used, Please let me know what should I do for the solution. Thanks.
Here I Have the issue which is created in responsive, have a look on the image url : image link
var myNewChartB = new Chart(ctx, {
type: "bar",
data: barData,
options: {
borderSkipped: false,
borderRadius: 3,
plugins: {
barRoundness: 1,
legend: {
display: false,
},
title: {
font: {
size: 16
},
display: true,
text: 'Researchers (n=3)',
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
datalabels: {
display: true,
clamp: true,
formatter: (val, context) => (`${val}%`),
anchor: 'start',
align: 'end',
}
},
responsive: true,
tooltips: {
enabled: false,
},
barThickness: 55,
maintainAspectRatio: false,
scales: {
x: {
display: true,
title: {
font: {
size: 16,
},
display: true,
text: "Scroes (1-9)",
},
grid: {
display: false,
drawBorder: false, //<- set this
},
},
y: {
display: true,
ticks: {
display: false
},
title: {
font: {
size: 16
},
display: true,
text: "% of Respondants",
},
grid: {
color: '#9B9898',
drawBorder: false, //<- set this
},
},
},
},
});
2 Answers
Reset to default 5In Chart.js 4+
we can use barPercentage to control bar thickness
like this:
const options = { barPercentage: 0.3, };
I have Created a snippet. Take a look. Charts are responsive automatically.
I didn't know from where this data: barData, is ing. So I have created my own dataset.
const ctx = document.getElementById('myNewChartB').getContext('2d');
const myNewChartB = new Chart(ctx, {
type: "bar",
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 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)',
'rgba(255, 159, 64, 0.2)'
],
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)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 55
}]
},
options: {
borderSkipped: false,
borderRadius: 3,
plugins: {
barRoundness: 1,
legend: {
display: false,
},
title: {
font: {
size: 16
},
display: true,
text: 'Researchers (n=3)',
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
datalabels: {
display: true,
clamp: true,
formatter: (val, context) => (`${val}%`),
anchor: 'start',
align: 'end',
}
},
responsive: true,
tooltips: {
enabled: false,
},
barThickness: 55,
maintainAspectRatio: false,
scales: {
x: {
display: true,
title: {
font: {
size: 16,
},
display: true,
text: "Scroes (1-9)",
},
grid: {
display: false,
drawBorder: false, //<- set this
},
},
y: {
display: true,
ticks: {
display: false
},
title: {
font: {
size: 16
},
display: true,
text: "% of Respondants",
},
grid: {
color: '#9B9898',
drawBorder: false, //<- set this
},
},
},
},
});<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<canvas id="myNewChartB" width="400" height="400"></canvas>