google chart hAxis text not rotate after pdf conversion with wkhtmltopdf

Friend I have problem with google chart and pdf. We have system to create report with charts. Everything working fine, only small problem we found. On Google chart hAxis text after conversion to pdf with wkhtmltopdf is not rotated. But on HTML is. I try delay wkhtmltopdf, allow slow scripts etc. But nothing working.

This is in HTML

This is in PDF

I was looking on SO and other pages but didn't find any solution for that. What else I can do to fix this? if this is possible to fix.

Edit:

var options = {              
         hAxis:{
            ticks:[<xsl:for-each select="//a:CommercialDelphiHistory/b:CompanyHistory/b:ScoreHistory">
            new Date(<xsl:value-of select="./b:ScoreHistoryDate/c:CCYY" />, <xsl:value-of select="./b:ScoreHistoryDate/c:MM"/>),
            </xsl:for-each>],
            girdlines:{color:'#000000',count:0},
            minorGirdlines:{color:'#000000',count:0},
            slantedTextAngle: 90,
            },
          legend: {position: 'bottom', textStyle:{}},
          colors: ['#1310ce', '#6a09a3'],
          pointSize: 10,
          series:{
          0: {pointShape: { type: 'square', rotation: 45}},
          1: {pointShape: { type: 'triangle', sides: 4 } },
          },          
          title: 'Credit limit and Credit Rating',
          height: 625,
          width: 475,
          chartArea:{left: 75, top:35, width:'75%', height: 375},
};

Solution

to correct, need to add the following option to hAxis

slantedText: true

without this option, the text will not slant, regardless of slantedTextAngle

also, the overlapping labels are the result of drawing the chart in a hidden container
which is most likely the result of the pdf process

to re-create the problem, i draw the chart in a hidden container,
then show the chart when it has finished drawing...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    ['Nov 2016', 100],
    ['Dec 2016', 100],
    ['Jan 2017', 100],
    ['Feb 2017', 100],
    ['Mar 2017', 100],
    ['Apr 2017', 100],
    ['May 2017', 100]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    $(container).removeClass('hidden');
  });
  chart.draw(data, {
    hAxis:{
      slantedTextAngle: 90,
    },
    legend: {position: 'bottom', textStyle:{}},
    colors: ['#1310ce', '#6a09a3'],
    pointSize: 10,
    series:{
    0: {pointShape: { type: 'square', rotation: 45}},
    1: {pointShape: { type: 'triangle', sides: 4 } },
    },
    title: 'Credit limit and Credit Rating',
    height: 625,
    width: 475,
    chartArea:{left: 75, top:35, width:'75%', height: 375},
  });
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>

adding the option corrects the issue here...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    ['Nov 2016', 100],
    ['Dec 2016', 100],
    ['Jan 2017', 100],
    ['Feb 2017', 100],
    ['Mar 2017', 100],
    ['Apr 2017', 100],
    ['May 2017', 100]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    $(container).removeClass('hidden');
  });
  chart.draw(data, {
    hAxis:{
      slantedText: true,
      slantedTextAngle: 90,
    },
    legend: {position: 'bottom', textStyle:{}},
    colors: ['#1310ce', '#6a09a3'],
    pointSize: 10,
    series:{
    0: {pointShape: { type: 'square', rotation: 45}},
    1: {pointShape: { type: 'triangle', sides: 4 } },
    },
    title: 'Credit limit and Credit Rating',
    height: 625,
    width: 475,
    chartArea:{left: 75, top:35, width:'75%', height: 375},
  });
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>