Wrapping text of x-Axis Labels for Google Visualization Charts

Question

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:

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>

Answer 1

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));

Answer 2

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>