Search code examples
javascriptchartsdirectionmorris.js

Morris.js Line-Chart first value on the right side

I created a line chart with morris.js

This is my js-Code:

var m1 = new Morris.Line({
    element: 'line-chart1',
    data: [
        { month: '2016-09', a: 20, b: 0 }, 
        { month: '2016-08', a: 0, b: 0 },
        { month: '2016-07', a: 0, b: 0 },
        { month: '2016-06', a: 0, b: 0 },
        { month: '2016-05', a: 0, b: 0 },
        { month: '2016-04', a: 0, b: 0 },
        { month: '2016-03', a: 0, b: 0 },
        { month: '2016-02', a: 0, b: 0 },
        { month: '2016-01', a: 0, b: 0 },
        { month: '2015-12', a: 0, b: 0 },
        { month: '2015-11', a: 0, b: 0 },
        { month: '2015-10', a: 0, b: 0 },
        { month: '2015-09', a: 0, b: 0 }],
    xkey: 'month',
    ykeys: ['a', 'b'],
    labels: ['Deutsche Gäste', 'Internationale Gäste'],
    lineColors: ['#D9534F', '#428BCA'],
    lineWidth: '2px',
    hideHover: true,
    ymax: 100,
    xLabelAngle: 40,
    setAxisAlignFirstX: true
});

And this code works and the charts is drawn, but the problem ist that the first value (2016-09) is drawn on the right side. But I Want that it starts on the left.

This how it looks: Line-Chart

How can I make it possible that the first value is drawn on the left side, and then go on from left to right?

Thank you for your help ;-)

Solution

  • Simply set parseTime to false:

    parseTime: false

    Try the following snippet:

    var m1 = new Morris.Line({
  element: 'line-chart1',
  data: [
    { month: '2016-09', a: 20, b: 0 }, 
    { month: '2016-08', a: 0, b: 0 },
    { month: '2016-07', a: 0, b: 0 },
    { month: '2016-06', a: 0, b: 0 },
    { month: '2016-05', a: 0, b: 0 },
    { month: '2016-04', a: 0, b: 0 },
    { month: '2016-03', a: 0, b: 0 },
    { month: '2016-02', a: 0, b: 0 },
    { month: '2016-01', a: 0, b: 0 },
    { month: '2015-12', a: 0, b: 0 },
    { month: '2015-11', a: 0, b: 0 },
    { month: '2015-10', a: 0, b: 0 },
    { month: '2015-09', a: 0, b: 0 }],
  xkey: 'month',
  ykeys: ['a', 'b'],
  labels: ['Deutsche Gäste', 'Internationale Gäste'],
  lineColors: ['#D9534F', '#428BCA'],
  lineWidth: '2px',
  hideHover: true,
  ymax: 100,
  xLabelAngle: 40,
  setAxisAlignFirstX: true,
  parseTime: false
});
    <script src="https://ajax.googleapis.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="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="line-chart1"></div>