CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Kivan Ilangakoon
Kivan Ilangakoon

Reputation: 457

Wrapping text of x-Axis Labels for Google Visualization Charts

I cannot seem to wrap my label for my column chart. I tried fiddling around with the options but it doesn't make any difference. This is my current chart view, as you can see the label for column 2 has completely disappeared as the column 1 label has overlapped: enter image description here

this is my Column Chart View:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
                    <script type="text/javascript">
                        google.load("visualization", "1.1", { packages: ["bar"] });
                        google.setOnLoadCallback(drawChart);
                        function drawChart() {
                            var data1 = google.visualization.arrayToDataTable([
                              ['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
                               @Html.Raw(rows)]);

                            var options = {
                                title: '',
                                'width': 800,
                                'height': 500
                            };

                            var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
                            chart.draw(data1, options);
                            }
                    </script>
                    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>

Upvotes: 1

Views: 5449

Answers (2)

WhiteHat
WhiteHat

Reputation: 61222

You can reduce the font size down to 11 to get the label to show...

var options = {
    'title': '',
    'width': 800,
    'height': 500,
    'hAxis': {'textStyle': {'fontSize': 11}}
};

To do so, you will need to convert your options...

chart.draw(data1, google.charts.Bar.convertOptions(options));

Upvotes: 4

Dr.Molle
Dr.Molle

Reputation: 117334

you may draw a classical ColumnChart (when it is an option):

google.load("visualization", "1.1", {
        packages: ["corechart"]
      });

      google.load("visualization", "1.1", {
        packages: ["corechart"]
      });
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data1 = google.visualization.arrayToDataTable([
          ['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
          ['Commerce, Law and Managment', 4, 9, 9, 1],
          ['foobar',2,2,2,3],
          ['Health Sciences', 0,2,3,1],
          ['Humanities', 0, 1, 1, 0],
          ['Science', 0, 0, 0, 1]
        ]);
        var options = {
          title: '',
          'width': 800,
          'height': 500,
          vAxis: {
            gridlines: {
              count: 10
            }
          }
        };

        var chart = new google.visualization
                      .ColumnChart(document.getElementById('columnchart_material'));
        chart.draw(data1, options);
      }
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Upvotes: -1

Related Questions