how do I show a horizontal reference line in a google column chart?

Question

A similar question has been asked previously here: Google Charts: Horizontal Reference Line on Barchart

but the answer involves creating a bespoke event listener which seems quite complex (to me). is there a simpler solution?

I have a google charts column chart with data displayed in various columns. I would like to add a horizontal reference line to indicate a particular threshold value on the y-axis. I am aware that it is possible to create something akin to what I want using a Google Combochart to show both columns and a line on the same chart. However, with this method, the reference line extends between the centre of the first and last column only rather than all the way across the chart.

Essentially, I want to highlight a particular value on the y-axis by having a line run all the way across the chart

WhiteHat WhiteHat · Accepted Answer · 2020-01-21T12:46:28

you could use a continuous x-axis (numbers),
with null values on the left and right.

['Category', 'Value', 'Reference'],
[0, null, 0.80],
[1, 0.10, 0.80],
[2, 0.30, 0.80],
[3, 0.20, 0.80],
[4, null, 0.80]

then use custom ticks to display words on the x-axis,
and a view window to limit the view of the x-axis,
which will take the horizontal line all the way across the chart.

hAxis: {
  ticks: [{v: 1, f: 'Quant'}, {v: 2, f: 'Verbal'}, {v: 3, f: 'Total'}],
  viewWindow: {
    min: 0.5,
    max: 3.5
  }
},

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Category', 'Value', 'Reference'],
    [0, null, 0.80],
    [1, 0.10, 0.80],
    [2, 0.30, 0.80],
    [3, 0.20, 0.80],
    [4, null, 0.80]
  ]);

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);
  chart.draw(data, {
    colors: ['lime', 'magenta'],
    hAxis: {
      ticks: [{v: 1, f: 'Quant'}, {v: 2, f: 'Verbal'}, {v: 3, f: 'Total'}],
      viewWindow: {
        min: 0.5,
        max: 3.5
      }
    },
    legend: 'none',
    series: {
      1: {
        type: 'line'
      }
    },
    title: 'Percentile Score',
    vAxis: {
      format: 'percent',
      viewWindow: {
        min: 0,
        max: 1
      }
    }
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

how do I show a horizontal reference line in a google column chart?

1 Answers