Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to increase width of morris.js bar or add space between bars?

I have this morris.js bar with multiple bars, i want to change width of the bars or make space between durations. From the below image is there a way to provide either more space between Feb March and April or is there a way to adjust bar widths?

enter image description here

Here is my code

Morris.Bar({
  element: 'morris-chart-bar',
  data: [
    { y: 'Feb', a: 75, b: 60, c: 5, d: 50 },    
    { y: 'March', a: 180,  b: 220, c: 140, d: 160 },
    { y: 'April', a: 300,  b: 340, c: 350, d: 270 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b', 'c', 'd'],
  labels: ['A', 'B', 'C', 'D'],
  barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'],
  hideHover: 'auto'
});

you can test it here

like image 213
AabinGunz Avatar asked Dec 01 '22 19:12

AabinGunz


1 Answers

The api doc pages seem to omit several properties. You can learn about more by looking at the source, where I found these 2 guys:

barGap and barSizeRatio

barGap is an integer that sets the space between bars in a single bar group. It defaults to 3. Increase it to space them further, decrease it to bring them closer together. barSizeRatio is the proportion of the width of the entire graph given to bars. It defaults to 0.75. Increase the number closer to 1 to make the bars wider, if its =1 the bars will take up the entire graph, if its > 1 bars will overlap.

Morris.Bar({
  barGap:4,
  barSizeRatio:0.55,
  element: 'morris-chart-bar',
  data: [
    { y: 'Feb', a: 75, b: 60, c: 5, d: 50 },    
    { y: 'March', a: 180,  b: 220, c: 140, d: 160 },
    { y: 'April', a: 300,  b: 340, c: 350, d: 270 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b', 'c', 'd'],
  labels: ['A', 'B', 'C', 'D'],
  barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'],
  hideHover: 'auto'
});
like image 133
chiliNUT Avatar answered Dec 04 '22 11:12

chiliNUT