hAxis label is cut off in Google chart

Question

To track number of visitor comes through which website and do some analysis on the same. We are creating a column chart to show the analysis report in graphical form.

All the things are showing correctly on chart, but we are showing website name on haxis. As website name is too long like "www.google.com", www.facebook.com, this label are being cut off on haxis.

Code to draw chart is given below:

function createTodayChart(chartData){
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sources');
  data.addColumn('number', 'Total Sales');

  for (var i in chartData){
    //alert(chartData[i][0]+'=>'+ parseInt(chartData[i][1]));
    data.addRow([chartData[i][0], parseInt(chartData[i][1])]);
  }

  var options = {
    legend: {position:'top'},
    hAxis: {title: 'Sources', titleTextStyle: {color: 'black'}, count: -1, viewWindowMode: 'pretty', slantedText: true},
    vAxis: {title: 'Total Sales (in USD)', titleTextStyle: {color: 'black'}, count: -1, format: '$#'},
    colors: ['#F1CA3A']
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('my_div'));
  chart.draw(data, options);    
}  

Data in chartData variable is in array form as:

var chartData = [];  
cartData.push('www.w3school.com', 106);  
cartData.push('www.google.com', 210); 

Width and height of "my_div" are 350px and 300px respectively. We have also attached screen shot of this issue given below:

Can anyone help me that how can we prevent this cutting issue. Or, Is any method available in google chart API to prevent this?

Waiting for solution.

Answer 1

This is an always recurring issue in google visualization, in my opinion :( There are a few "tricks" one can experiment with : chartArea and hAxis.textPosition. Here is your code in a jsFiddle with the following chartData, reproducing the problem above :

var chartData = [
    ['www.facebook.com', 45],
    ['http://www.google.com', 67],
    ['www.stackoverflow.com', 11]    
];

fiddle -> http://jsfiddle.net/a6WYw/

---

chartArea can be used to adjust the upper "padding" taking space from the legend / hAxis below along with the internal height of the bars (the chart itself without axis and legend). For example

chartArea: {
   top: 55,
   height: '40%' 
}

Will shrink the chartArea, giving room for the legend on the hAxis.

fiddle -> http://jsfiddle.net/Swtv3/

---

My personal favourite is to place the hAxis legend inside the chart by

hAxis : { textPosition : 'in' } 

This will honor both short and long descriptions, and does not make the chart looking too "weird" when there is a few very long strings.

fiddle -> http://jsfiddle.net/7HBmX/

---

As per comment - move the "in" labels outside the chart. There is to my knowledge no native way to do this, but we can always alter the <svg>. This can be a difficult task, but in this case we know that the only <text> elements who has the text-anchor="middle" attribute is the h-axis labels and the overall h-axis description. So

var y, labels =  document.querySelectorAll('[text-anchor="middle"]');
for (var i=0;i<labels.length-2;i++) { 
   y = parseInt(labels[i].getAttribute('y'));
   labels[i].setAttribute('y', y+30);
}

to move the labels outside the chart. demo -> http://jsfiddle.net/970opuu0/