wolfgang1983 wolfgang1983 - 3 months ago 37
Javascript Question

Morris.js bar chart not displaying evey xkey

I have been using Morris.js And have set xkey.

Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sept, 'Oct', Nov, Dec


I am using bootstrap col-lg-6 like

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<div id="bar-example"></div>
</div>
</div>
</div>

<script type="text/javascript">
$( document ).ready(function() {
Morris.Bar({
element: 'bar-example',
resize: true,
stacked: true,
grid: true,
gridTextSize: 10,
data: [
{ m: 'Jan', a: 1},
{ m: 'Feb', a: 2},
{ m: 'Mar', a: 3},
{ m: 'Apr', a: 4},
{ m: 'May', a: 5},
{ m: 'Jun', a: 15},
{ m: 'Jul', a: 7},
{ m: 'Aug', a: 8},
{ m: 'Sept', a: 9},
{ m: 'Oct', a: 10},
{ m: 'Nov', a: 11},
{ m: 'Dec', a: 12}
],
xkey: 'm',
ykeys: ['a'],
labels: ['New Users']
});
});
</script>


But for some reason when I am using smaller columns of bootstrap the bar chart does not display all of the xkey

xkey.
, Feb, , Apr, , Jun, , Aug, , Nov, Dec


It Seems to miss some of the months when in smaller columns of bootstrap

Here is the codepen example Code View and Full View


Question How is it possible when have smaller bar chart to display all of the xkey?

Answer

This has been a frustrating issue with no real solution, but you can try this:

Add xLabelAngle: 60 to your Morris options:

Morris.Bar({
      ...
      xLabelAngle: 60,
      ...
});

This will turn the label angle, which forces Morris to render the xkeys. For some reason, it interprets smaller widths to mean a lack of space for the xkeys even though we can clearly see there is enough room for all of the xkeys.

Another option is to decrease the gridTextSize although I tried it in your CodePen and don't recommend it since the xkeys are not legible.