Misalign x axis after rotate

by Patompong Savaengsuk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<div id="graph"></div>

CSS

.dygraph-axis-label-x {
  transform: rotate(270deg);
  position: relative;
  top: 10px;
  font-size: 0.8rem;
}

JavaScript

let data = [];
let now = moment('2019-08-01').hour(0).minute(0).second(0);

for (let i = 0; i < 30; i++) {
  data.push([now.toDate(), 100, 200]);
  now.add(1, 'day');
}

g = new Dygraph(
  document.getElementById("graph"),
  data, {
    legend: 'always',
    animatedZooms: true,
    title: 'Misalign x axis after rorate example',
    drawCallback: null,
    animatedZooms: true,
    panEdgeFraction: 0.1,
    axes: {
      x: {
        axisLabelFormatter: function(date, gran, opts, dygraph) {
          return moment(date).format('DD/MM');
        },
        ticker: function(min, max, pixels, opts, dygraph, vals) {
          return Dygraph.getDateAxis(min, max, Dygraph.Granularity.DAILY, opts, dygraph);
        }
      }
    }
  }
);