Google Charts: Horizontal Reference Line on Barchart -

having barchart following

i want able draw horizontal reference line (for example @ 80%). doesn't seem possible on google charts.

i've tried several things, including combo charts multiple series. won't nice since haxis discrete :(

your appreciated.

add series reference line

use same value rows , change series type 'line'

see following working snippet...

google.charts.load('current', {    callback: drawchart,    packages: ['corechart']  });    function drawchart() {    var data = google.visualization.arraytodatatable([      ['category', 'value', 'reference'],      ['quant', 0.10, 0.80],      ['verbal', 0.30, 0.80],      ['total', 0.20, 0.80]    ]);      var chartdiv = document.getelementbyid('chart_div');    var chart = new google.visualization.columnchart(chartdiv);    chart.draw(data, {      colors: ['lime', 'magenta'],      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>

edit

in above snippet, reference line stops @ center of first , last columns

extend line edges of columns changing coordinates of reference line,
use 'ready' listener know when chart has been drawn

the key finding specific chart elements need work with,
in following snippet, series color used find columns , reference line

google.charts.load('current', {    callback: drawchart,    packages: ['corechart']  });    function drawchart() {    var data = google.visualization.arraytodatatable([      ['category', 'value', 'reference'],      ['quant', 0.10, 0.80],      ['verbal', 0.30, 0.80],      ['total', 0.20, 0.80]    ]);      var chartdiv = document.getelementbyid('chart_div');    var chart = new google.visualization.columnchart(chartdiv);      // use colors find chart elements    var colormagenta = '#ff00ff';    var colorlime = '#00ff00';      var xbeg;    // save first x coord    var xwidth;  // save width of column      var rowindex = -1;  // find first column      google.visualization.events.addlistener(chart, 'ready', function () {      // columns      array.prototype.foreach.call(chartdiv.getelementsbytagname('rect'), function(rect, index) {        if (rect.getattribute('fill') === colorlime) {          rowindex++;          xwidth = parsefloat(rect.getattribute('width')) / 2;          if (rowindex === 0) {            xbeg = parsefloat(rect.getattribute('x'));          }        }      });        // reference line      array.prototype.foreach.call(chartdiv.getelementsbytagname('path'), function(path, index) {        if (path.getattribute('stroke') === colormagenta) {          // change line coords          var refcoords = path.getattribute('d').split(',');          refcoords[0] = 'm' + xbeg;          var refwidth = refcoords[2].split('l');          refwidth[1] = parsefloat(refwidth[1]) + xwidth;          refcoords[2] = refwidth.join('l');          path.setattribute('d', refcoords.join(','));        }      });    });      chart.draw(data, {      colors: [colorlime, colormagenta],      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>