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?

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

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?

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

• javascript
• jquery
• css
• morris.js

1 Answer 1

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'
});