Thank you for developing such a great tool. I have a couple of questions:
- I’m currently using
categoryPercentageandbarPercentagefor controlling bar width and overlap, which works well. However, when there are fewer data points, the bar thickness increases, leading to inconsistency. I want to maintain consistency in bar thickness across all data points.
I tried to use maxBarThickness and barThickness, but they don’t allow for overlaps like barPercentage does. I have attached images for reference. As you can see, the bar thickness varies with different dataset length, which looks odd. I want all bars to have the same thickness and also retain the overlap feature.
- Also, when the length of datasets is less than 5, the bars tend to move towards the center. Is it possible to keep them in their original positions instead?
Could you please assist me with this issue? Thank you.
code:
{
type: "horizontalBar",
data: {
labels:['Test 1','Test 2','Test 3', 'Test 4','Test 5'],
datasets: [
{
backgroundColor: "#eb4034",
data: [34,45,12,54,4],
categoryPercentage: 0.3,
barPercentage: 3.2,
// barThickness: 30,
// maxBarThickness: 20,
},
{
backgroundColor: "#b8b1b0",
data: [44,25,20,45,20],
// maxBarThickness: 20,
// barThickness: 30,
categoryPercentage: 0.3,
barPercentage:3.2,
},
],
},
options: {
plugins: {
roundedBars: {
allCorners: true,
cornerRadius: 12,
},
tickFormat: {
suffix: "%",
},
},
scales: {
yAxes: [
{
ticks: {
fontColor: "black",
labelOffset: -8,
mirror: true,
padding: 180
},
gridLines: {
display: false,
},
},
],
xAxes: [
{
scaleLabel: {
display: true,
labelString: "test",
fontColor: "black",
},
position: "top",
gridLines: {
display: true,
drawTicks: false,
drawOnChartArea: false,
color: "#E4E7EC",
},
ticks: {
display: true,
fontColor: "black",
padding: 5,
},
},
],
},
legend: {
display: false,
},
layout: {
padding: {
left: 180
}
},
},
}