title: How to position crosshairs on Google chart?
body: <p>The code below is for a Google area chart.</p>
  
  <p>Currently the cross-hairs are placed on the top of a data point when the mouse is moved across the chart.  How do you offset the x and y position of the cross-hairs so that they can be positioned halfway between the vertical data points.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
  
          var chartData = 
              [
                  ['Year', 'Fees', 'Invest', 'Other', 'More'],
              ];
  
          var year = 2013;
          var col1 = 50;
          var col2 = 100;
          var col3 = 200;
          var col4 = 100;
  
          var years = 30;
  
          for (x = 1; x &lt;= years; x++) {
  
              chartData.push([year.toString(), Number(col1), Number(col2), Number(col3), Number(col4)]);   
              year++;
              col1 = col1 + (col1 * 0.03);
              col2 = col2 + (col2 * 0.02);
              col3 = col3 + (col3 * 0.05);
              col4 = col4 + (col3 * 0.02);
  
          }
  
          var data = google.visualization.arrayToDataTable(chartData);
  
          var options = {
            title: 'Mouseover chart',
            hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
            vAxis: {minValue: 0},
            isStacked: true,
            tooltip:{trigger:'selection'}, 
  
  
             crosshair: { trigger: 'both' },
            series: {
              0: { color: '#ffffff' },
              1: { color: '#aca789' },
              2: { color: '#627b15' },
              3: { color: '#96ac4b' },
            }
  
          };
  
          var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
          chart.draw(data, options);
  
          google.visualization.events.addListener(chart, 'onmouseover', function (e) {
              var xValue = data.getValue (e.row, 0);
               chart.setSelection([e]);
  
              console.log("Mouse over = " + xValue);
          });
  
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="chart_div" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>