title: Connect two different values with vertical line in highcharts
body: <p>Hi I'm looking for a good chart plugin for my website. I found highcharts, which solves the mostly of my needs. Now I builded follow chart with this plugin:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      $('#container').highcharts({
          chart: {
              zoomType: 'xy'
          },
          title: {
              text: 'Connect Values'
          },
          subtitle: {
              text: 'Value 1 and Value 2'
          },
          xAxis: [{
              categories: ['24.05.2015', '01.06.2015', '12.06.2015', '19.06.2015', '25.06.2015'],
              crosshair: true
          }],
          yAxis: [{ // Primary yAxis
              labels: {
                  format: '{value}',
                  style: {
                      color: Highcharts.getOptions().colors[1]
                  }
              },
              title: {
                  text: 'Value 1',
                  style: {
                      color: Highcharts.getOptions().colors[1]
                  }
              }
          }, { // Secondary yAxis
              title: {
                  text: 'Value 2',
                  style: {
                      color: Highcharts.getOptions().colors[0]
                  }
              },
              labels: {
                  format: '{value}',
                  style: {
                      color: Highcharts.getOptions().colors[0]
                  }
              },
              opposite: true
          }],
          tooltip: {
              shared: true
          },
          legend: {
              layout: 'vertical',
              align: 'left',
              x: 120,
              verticalAlign: 'top',
              y: 100,
              floating: true,
              backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
          },
          series: [{
              name: 'Value 2',
              type: 'spline',
              yAxis: 1,
              data: [77, 69, 89, 84, 86],
              tooltip: {
                  valueSuffix: ''
              }
  
          }, {
              name: 'Value 1',
              type: 'spline',
              data: [120, 118, 126, 129, 135],
              tooltip: {
                  valueSuffix: ''
              }
          }]
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I would like to connect the two values in a zone of the two different lines with a vertical line from point to point like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Yrlfg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yrlfg.png" alt="enter image description here"></a></p>
  
  <p>Or is this also possible:</p>
  
  <p><a href="https://i.stack.imgur.com/1vzYs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1vzYs.png" alt="enter image description here"></a></p>
  
  <p>Can I do this in highcharts? Or is there an other chart plugin which also contains multiple y-axis (2 or more) and can connect values? I hope for some help.</p>
  
  <p>Thanks.</p>