CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Sushil Gaur
Sushil Gaur

Reputation: 91

How can i slant/rotate hAxis and vAxis text of horizonata/vertical bar chart as per latest January 2020 release

I did not find any solution on how to achieve slantedText option in bar chart. Is google removed the slantedText property from its latest version?

Here is my code:-

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>

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

    function drawChart() {
      // Define the chart to be drawn.
      var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population',],
        ['New York City, NY', 8175000],
        ['Los Angeles, CA', 3792000],
        ['Chicago, IL', 2695000],
        ['Houston, TX', 2099000],
        ['Philadelphia, PA', 1526000]
      ]);

      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        legend: { position: "bottom" },
        hAxis: {
          title: 'Total Population',
          minValue: 0,
          slantedText: true,
          slantedTextAngle: 60
        },
        vAxis: {
          title: 'City'
        }
      }

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

</script>

Upvotes: 3

Views: 209

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

google.charts.Bar is considered a material chart,
there are several options that are not supported by material charts, including... 

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

see Tracking Issue for Material Chart Feature Parity

instead, you would need to use a classic chart. 

google.visualization.ColumnChart

or 

google.visualization.BarChart

Upvotes: 3

Related Questions