title: How to render a vertical line when the mouse cursor is on the chart using highcharts?
body: <p>I have been working on a web application which used Highcharts for charting data.  As such, one of the requirement is that when I hover my mouse on the chart (screenshot below - assuming the arrow is the mouse cursor), a vertical line will automatically display of where the mouse cursor was.  Aside from that, the vertical line will also move along the x-axis as the mouse cursor moves sideways within the chart.</p>
  <p>This is the sample chart.</p>
  <p><a href="https://i.stack.imgur.com/SInAA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SInAA.png" alt="enter image description here" /></a></p>
  <p>This is my highchart configuration script:</p>
  <pre><code>    function plotChartData(dataseries, xtitle)
  {
      myChart = new Highcharts.Chart({
          chart: {
              renderTo: 'trendspace',
              type: 'line',
              zoomType: 'xy',
              panning: true,
              panKey: 'shift',
              plotBorderWidth: 1
          },
          title: {
              text: ''
          },
          legend: {
              layout: 'horizontal',
              align: 'left',
              itemDistance: 10,
              borderWidth: 0,
              itemMarginTop: 0,
              itemMarginBottom: 0,
              padding: 20
          },
          plotOptions: {
              series: {
                  states: {
                      hover: {
                          enabled: false
                      }
                  },
                  dataLabels: {
                      enabled: false,
                      format: '{y}'
                  },
                  allowPointSelect: false
              }
          },
          xAxis: {
              type: 'datetime',
              labels: {
                  rotation: -65,
                  style: {
                      fontSize: '9px',
                      fontFamily: 'Verdana, sans-serif'
                  }
              }
          },
          yAxis: {
              gridLineColor: '#DDDDDD',
              gridLineWidth: 0.5
          },
          series: [{
              name: xtitle,
              data: dataseries,
              tooltip: {
                  pointFormat: '{series.name}: &lt;b&gt;{point.y}&lt;/b&gt;&lt;br/&gt;',
                  valueDecimals: 2
              }
          }]
      });
  }
  </code></pre>
  <p>I browsed through the Highcharts API and I can't find the exact method or configuration to make that happen.  Is this doable in Highchart? How can I achieve this?</p>