Column chart: how to show all labels on horizontal axis

Question

I\'ve been trying to show all labels on the horizonal axis of my chart, but I haven\'t been able to do that!

I tried using hAxis.showTextEvery=1 but

Answer 1

Your problem is related to the continuous versus discrete subtleties in ColumnChart. Basically, you have continuous values for labels on your hAxis, and the showTextEvery only works for discrete ones. To fix this, I would do the following:

1. Have all your missing ratings inserted into the chart (ie, if there are no values at rating '3', insert a zero).
2. Order the ratings in the chart. (Google charts could sort this for you, but it's likely easier to just order them.)
3. Change the ratings to {"id":"","label":"ratings","type":"string"},
4. Use the showTextEvery:1 in the options

Below is some code that demonstrates this:

var data = new google.visualization.DataTable(
{
  "cols":[
    {"id":"","label":"ratings","type":"string"},
    {"id":"","label":"# of movies","type":"number"}],
  "rows":[
    {"c":[{"v":'10'},{"v":5}]},
    {"c":[{"v":'9'}, {"v":26}]},
    {"c":[{"v":'8'}, {"v":64}]},
    {"c":[{"v":'7'}, {"v":50}]},
    {"c":[{"v":'6'}, {"v":38}]},
    {"c":[{"v":'5'}, {"v":10}]},
    {"c":[{"v":'4'}, {"v":1}]},
    {"c":[{"v":'3'}, {"v":0}]},
    {"c":[{"v":'2'}, {"v":1}]},
    {"c":[{"v":'1'}, {"v":0}]},
  ]});

var options = {
  "title":"Rating distribution",
  "vAxis":{"title":"# of movies","minValue":0},
  "hAxis":{"title":"Ratings",showTextEvery:1},
  "legend":"none",
  "width":800,"height":400,"colors":["red"]
};

Answer 2

In addition to Jeremy's solution, another approach is to keep using continuous values on the hAxis, but specify the number of gridlines you want, which should be the same as the number of labels you want. If you want 10 labels, 1 through 10, this should work:

hAxis: { gridlines: { count: 10 } }