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

Sushil Kumar

unread,

Jan 17, 2020, 9:50:43 AM1/17/20

to Google Visualization API

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

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script async>
    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>


</head>
<body>
  <!-- Identify where the chart should be drawn. -->
  <div id="BarChart"></div>
</body>
</html>

Daniel LaLiberte

unread,

Jan 17, 2020, 10:34:07 AM1/17/20

to Google Visualization API

Hi Sushil,

Unfortunately, the google.charts.Bar chart does not support most of the tick options. It looks like the rest of your options are correct for the corechart google.visualization.ColumnChart, however, so try that. And if you want the material styling, try adding theme:'material'.

CONFIDENTIALITY NOTICE
======================
This email message and any attachments are for the exclusive use of the intended recipient's and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email and destroy all copies of the original message along with any attachments, from your computer system. If you are the intended recipient, please be advised that the content of this message is subject to access, review and disclosure by the sender's Email System Administrator.
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/a40010ff-7a12-4ea4-8bab-8af28f4aa4fb%40googlegroups.com.

--

Daniel LaLiberte

dlaliberte@Google.com Cambridge MA

go/gviz-headcount