How rotate label in google chart?

Question

I am using google column chart which have a dual 'y-axis' and want to rotate it's label. I have also tried hAxis:{slantedText: true} but not effect however hAxis:{slantedText: true} worked where a graph which have single y-axis.

Here is my code:-

var data = new google.visualization.arrayToDataTable(loadStageLeadGraphData);
                var options = {

                    series: {
                        0: {
                            axis: 'distance'
                        }, // Bind series 0 to an axis named 'distance'.
                        1: {
                            axis: 'brightness'
                        } // Bind series 1 to an axis named 'brightness'.
                    },
                    chartArea: {
                        top: 55,
                        height: '40%'
                    },
                    axes: {
                        y: {
                            distance: {
                                label: 'Leads'
                            }, // Left y-axis.
                            brightness: {
                                side: 'right',
                                label: 'Value (INR)'
                            } // Right y-axis.
                        }
                    },
                    vAxis: { format: 'decimal' },
                    hAxis: {
                        slantedText: true,
                    },
                    colors: ['#CBD570', '#FCC100']
                };

                var chart = new google.charts.Bar(document.getElementById('Lead_stage'));
                chart.draw(data, google.charts.Bar.convertOptions(options));

Here is issue image:-

Answer 1

there are several options that are not supported by Material charts, including...

{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText

see --> Tracking Issue for Material Chart Feature Parity #2143

recommend using a Core chart instead...

you can use the following option to get the look and feel close to Material...

theme: 'material'

---

Material --> google.charts.Bar

Core --> google.visualization.BarChart

---

EDIT

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages:['bar', 'corechart']
});

function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Lead Stages', 'Leads', 'Value (INR)'],
    ['Business Requirements', 12, 1600000],
    ['Other Category', 3, 1200000],
    ['Prospect', 1, 50000],
    ['In Negotiation', 1, 100000],
    ['Testing Phase', 4, 1000000]
  ]);

  var options_m = {
    series: {
      0: {
        axis: 'distance'
      },
      1: {
        axis: 'brightness'
      }
    },
    chartArea: {
      top: 55,
      height: '40%'
    },
    axes: {
      y: {
        distance: {
          label: 'Leads'
        },
        brightness: {
          side: 'right',
          label: 'Value (INR)'
        }
      }
    },
    vAxis: {
      format: 'decimal'
    },
    hAxis: {
      slantedText: true,
    },
    width: 600,
    height: 300,
    colors: ['#CBD570', '#FCC100']
  };

  var chart_m = new google.charts.Bar(document.getElementById('chart_div_m'));
  chart_m.draw(data, google.charts.Bar.convertOptions(options_m));

  var options_c = {
    series: {
      0: {
        targetAxisIndex: 0
      },
      1: {
        targetAxisIndex: 1
      }
    },
    chartArea: {
      bottom: 84,
      top: 55,
      height: '40%'
    },
    vAxes: {
      0: {
        title: data.getColumnLabel(1)
      },
      1: {
        title: data.getColumnLabel(2)
      }
    },
    vAxis: {
      format: 'decimal'
    },
    hAxis: {
      slantedText: true,
    },
    width: 600,
    height: 300,
    colors: ['#CBD570', '#FCC100'],
    theme: 'material'
  };

  var chart_c = new google.visualization.ColumnChart(document.getElementById('chart_div_c'));
  chart_c.draw(data, options_c);
}

div {
  margin-bottom: 6px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Material</div>
<div id="chart_div_m"></div>
<div>Core</div>
<div id="chart_div_c"></div>