wolfgang1983 wolfgang1983 - 2 months ago 14
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>

<script type="text/javascript">
$( document ).ready(function() {
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']

But for some reason when I am using smaller columns of bootstrap the bar chart does not display all of the 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?


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

Add xLabelAngle: 60 to your Morris options:

      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.