Chartist label issue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css">
  <div class="ui-layout-center">
    <div id="content-frame">
      <div style="float:left; width: 100%;border: 1px solid #102452;  ;margin-top: 10px; padding-bottom: 100px " class="outline">
        <div class="table-container" data-enhance="false">
          <div id="j2011" class="ct-chart jaarChart  ct-legend">
          </div>
        </div>
        <div class="table-container" data-enhance="false">
          <div id="j2012" class="ct-chart jaarChart  ct-legend">
          </div>
        </div>

        <script>
          new Chartist.Bar('#j2011', {
            labels: ["A long title 1", "A long title 2", "A long title 3", "A long title 4", "A long title 5", "A long title 6", "A long title 7", "A long title 8", "A long title 9", "A long title 10"],
            series: [
              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              [0, 0, 0, 0, 0, 2, 10, 0, 0, 0],
              [0, 0, 0, 0, 4, 11, 20, 0, 0, 0],
              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              [0, 0, 0, 0, 0, 3, 12, 0, 0, 0],
              [0, 0, 0, 0, 1, 0, 3, 0, 0, 0]
            ],

          }, {
            stackBars: true,
            high: 104,


          }).on('draw', function(data) {
            if (data.type === 'bar') {
              data.element.attr({
                style: 'stroke-width: 35px'
              });
            }
          })

          new Chartist.Bar('#j2012', {
            labels: ["A long title 1", "A long title 2", "A long title 3", "A long title 4", "A long title 5", "A long title 6", "A long title 7", "A long title 8", "A long title 9", "A long title 10"],
            series: [
              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              [0, 0, 0, 0, 0, 2, 10, 0, 0, 0],
              [0, 0, 0, 0, 4, 11, 20, 0, 0,...

CSS

.ct-chart .ct-label.ct-horizontal.ct-end {
  transform: translate(-15px, 15px) rotate(315deg);
  white-space: nowrap;
}

.table-container {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  border: 1px solid #ccc;
  padding-right: 25px;
  margin: 2px;
  border-radius: 25px;
}