Search code examples
morris.js

Morris.js xlabels are cut in vertical position

I am using Morris.js

I want to add xlabels in a format of datetime (2012-02-14 12:55:00), and I want to put them into vertical position.

But the problem is that the beginning of the text does not fit.

xlabel images

Below is my code:

Morris.Bar({
    element : 'graph_bar',
    data:[<?php 
    echo  $chart_data; ?>],
    xkey:  <?php echo  "'$eje_x'"; ?>,
    ykeys: [ <?php echo  "$y_keys"; ?>],
    labels: [ <?php echo  "$y_keys"; ?>],
    xLabelAngle: 90,
    hideHover: 'auto'
});
Solution

  • You can set the overflow CSS property of svg to visible like this:

    svg { overflow: visible !important; }

    By default, this property is set to hidden, that's why you don't see all your labels when the height is too high.

    Please try the following snippet (it seems the snippet is only working in full page):

    var data = [
  { "hour": "2012-02-14 11:45:00", "value": 50 },
  { "hour": "2012-02-14 11:55:00", "value": 5 },
  { "hour": "2012-02-14 12:05:00", "value": 10 },
  { "hour": "2012-02-14 12:15:00", "value": 30 },
  { "hour": "2012-02-14 12:25:00", "value": 84 },
  { "hour": "2012-02-14 12:35:00", "value": 43 },
  { "hour": "2012-02-14 12:45:00", "value": 23 },
  { "hour": "2012-02-14 12:55:00", "value": 45 },
  { "hour": "2012-02-14 13:05:00", "value": 100 },
  { "hour": "2012-02-14 13:15:00", "value": 76 },
  { "hour": "2012-02-14 13:25:00", "value": 92 },
  { "hour": "2012-02-14 13:35:00", "value": 8 },
  { "hour": "2012-02-14 13:45:00", "value": 44 },
  { "hour": "2012-02-14 13:55:00", "value": 77 },
  { "hour": "2012-02-14 14:05:00", "value": 88 },
  { "hour": "2012-02-14 14:15:00", "value": 60 }
];

Morris.Bar({
  element: 'graph_bar',
  data: data,
  xkey: 'hour',
  ykeys: ['value'],
  labels: ['Date'],
  parseTime: false,
  xLabelAngle: 90,
});
    svg {
  overflow: visible !important;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="graph_bar"></div>