Custom Horizontal Gridlines With Google Visualization API

2
votes

Is it possible to add horizontal gridlines at irregular intervals to a Google Visualization ColumnChart? Something similar to the Good, Better, Best markers on this image chart:

Image chart with arbitrary gridlines

I have tried to figure it out myself, but have only found ways to add gridlines at regular intervals. Nothing at arbitrary locations.

If Google Visiualization can't do this, can anyone suggest a good javascript svg charting library that can?

1
chartsgoogle-visualizationgridlines

1 Answers

3
votes

Use the vAxis.ticks option:

vAxis: {
    ticks: [{v: 1, f: 'Good'}, {v: 3, f: 'Better'}, {v: 4, f: 'Best'}]
}

Each element in the ticks array is an object with v and f properties: the v property is the value to place the label at, and the f property is the label to use.