CODEWITHSUNDEEP
chartsgoogle-visualization
Maruccio
Maruccio

Reputation: 509

Google Charts: Horizontal Reference Line on Barchart

Having a Barchart like the following

BarChart

I want to be able to draw an horizontal reference line (For example at 80%). However this doesn't seem to be possible on Google Charts.

I've tried several things, including combo charts with multiple series. However it won't look very nice since the hAxis is discrete :(

Your help would be very appreciated.

Upvotes: 1

Views: 1842

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

add another series for the Reference Line

use the same value for all rows and change the series type to '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 the above snippet, the reference line stops at the center of the first and last columns

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

the key is finding the specific chart elements you need to work with,
in the following snippet, the series color is used to find the columns and 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 to 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>

Upvotes: 1

Related Questions