how to keep the same width in all bars in C3 Javascript library? - width

Question

I wan't to set all bars the same width, because if I have few bars they get super big, and If I have a lot bars they get very thin.
Here is what I mean:
I have bar width 50 because I tought this was the size of the bar, but it keeps making bars small if the amount increases.
Here is my code:
$(document).ready(function () {
var chart = c3.generate({
bindto: '#stocked',
size: {
height: 320,
width: 1500
},
data: {
labels: ['y',1,2,3,4,5,6],
columns: [
['MUSCLE', <?php echo substr($muscle,1,strlen($muscle)); ?>],
['FAT', <?php echo substr($fat,1,strlen($fat)); ?>]
],
groups: [
['MUSCLE', 'FAT']
],
type: 'bar',
colors: {
MUSCLE: '#75e3ff',
FAT: '#23bbe8'
}
},
bar: {
// width: { ratio: 0.8 }
width: 50,
},
axis: {
x: {
type: 'categories',
show: true,
label: {
text: 'Measurements',
position: 'outer-middle'
},
tick: {
format: "%b",
fit: true,
},
},
y: {
label: {
text: '<?php echo $_SESSION["unit"]; ?>',
position: 'outer-middle'
}
},
},
// subchart: {
// show: true
// },
// zoom: {
// enabled: true
// }
});
});
Thanks and greetings!

Answer 1

The width of your bars is the result of the width of your chart and the amount of data you have populating it. My recommendation would be to size your chart or the container holding your chart accordingly. This will prevent having large white spaces in between each of your bars and result in a more uniform look between your charts.
ex: pseudo code of how to determine how wide you chart should be.
var chart = c3.generate({
size: {
height: 240,
width: function () {
return 6 * 20 + 15
},
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
}
});
Here you can see that there of 6 pieces of data and each data is given 20 space and then an extra 15 to account for the axis/labels etc. If each you had 50 data then it should be width: 6 * 20 + 15 ..... of course now you have different width chart but the bar widths and space between bars should be pretty uniform. The more data the longer the chart. You might need to "20" and "15" to get the look you want.