https://jsfiddle.net/jsfLrc/krvodyx4/3/
I am using chart.js to create stacked bars. Now the height of each bar depends on their total numbers. I want to set all same height stacked bar even though the total numbers of each bar are not equal.
Is there any way to set it like this? result pic
below is the code I made now
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['F4A', 'F4B', 'F4C'],
datasets: [{
label: 'M',
data: [47.62, 50.00, 100],
backgroundColor: [
'#758C46',
'#758C46',
'#758C46',
],
borderColor: [
'#758C46',
'#758C46',
'#758C46',
],
borderWidth: 1
},{
label: 'F',
data: [52.38, 50.00, 0],
backgroundColor: [
'#6BBCC0',
'#6BBCC0',
'#6BBCC0',
],
borderColor: [
'#6BBCC0',
'#6BBCC0',
'#6BBCC0',
],
borderWidth: 1
}]
},
options: {
indexAxis: 'y',
scales: {
xAxes: [{
stacked: true,
min: 0,
max: 100,
callback: function(value) {
return value + "%"
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
max:100
},
stacked: true
}]
},
legend: {
display: true,
},
title: {
display: true,
fontColor: 'black',
fontSize: '20'
}
}
});