I created this fiddle. It contains a ChartJS bar chart:
https://jsfiddle.net/07pzys9t/
var options = {
legend: { display: false },
animation: {
animateScale: true
},
scales: {
xAxes: [{
barPercentage: 1,
categoryPercentage: 1,
barThickness : 45
}],
yAxes: [{
barPercentage: 1,
categoryPercentage: 1,
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
}
};
var dataForChart = {
datasets: [{
data: [0.2, 0.4, .78, 0.05],
backgroundColor:["#FF6384","#4BC0C0","#FFCE56","#36A2EB"],
borderWidth: 0
}],
labels: ['1', '2', '3', '4']
};
var chart = new Chart($("#statsRenderingResultsDeliveryClaimsChart"), {
type: 'bar',
data: dataForChart,
options: options
});
How can I remove the space between the bars? I read this answer:
Chart.js Bar Chart: How to remove space between the bars in v2.3?
But it doesn't seem to work because if you look at the code in the fiddle I created I add the barPercentage
and categoryPercentage
properties on both axes.
Any idea on how to achieve the wanted behaviour?
Thanks for the attention.
If you use chart with responsive aspect, you don't be force a width value to your bars.
You just need set your xAxes with this two attributes
xAxes: [{
barPercentage: 1.0,
categoryPercentage: 1.0
}]
Instead of :
xAxes: [{
barPercentage: 1,
categoryPercentage: 1,
barThickness : 45
}]
You need use percent value with responsive aspect using barPercentage and categoryPercentage attributes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.