title: Highcharts change crosshairs color by number of visible series
body: <p>What we are trying to do is to:   </p>
  
  <ul>
  <li>display crosshairs only if number of visible series > 1 (color: black)</li>
  <li>otherwise disable crosshairs or alternatively set color transparent</li>
  </ul>
  
  <p>Here are our problems:</p>
  
  <ul>
  <li>independent of the number of visible series the crosshairs is not shown for the first hover (but for all subsequent hovers)</li>
  <li>our main problem is that the color is not changing although the console.log displays that the color is correctly set due to the number of visible series</li>
  </ul>
  
  <p>Please see the fiddle: <a href="http://jsfiddle.net/D5DME/" rel="nofollow">example</a></p>
  
  <p>Thanks for your suggestions!</p>
  
  <pre><code>$(function () {
  var chart = new Highcharts.Chart({
      chart: {
          type: 'area',
          renderTo: 'container'
      },
      title: {
          text: 'Historic and Estimated Worldwide Population Growth by Region'
      },
      subtitle: {
          text: 'Source: Wikipedia.org'
      },
      xAxis: {
          categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
          tickmarkPlacement: 'on',
          title: {
              enabled: false
          }
      },
      yAxis: {
          title: {
              text: 'Billions'
          },
          labels: {
              formatter: function () {
                  return this.value / 1000;
              }
          }
      },
      tooltip: {
          formatter: function () {
  
              // show crosshairs only if visible series &gt;1, else transparent
              var nVisible = 0;
              for (var i = 0; i &lt; chart.series.length; i++) {
                  if (chart.series[i].visible) {
                      nVisible++;
                  };
                  if (nVisible &gt; 1) {
                      break;
                  };
              };
  
              if (nVisible &gt; 1) {
                  chart.options.tooltip.crosshairs = {
                      width: 1.5,
                      dashStyle: 'solid',
                      color: 'black'
                  };
              } else {
                  chart.options.tooltip.crosshairs = {
                      color: 'transparent'
                  };
  
              };
              console.log(chart.options.tooltip.crosshairs.color);
              return this.y + ' Billions';
          },
          backgroundColor: 'rgba(255,255,255,0.95)'
      },
      plotOptions: {
          area: {
              stacking: 'normal',
              lineColor: '#666666',
              lineWidth: 1,
              marker: {
                  lineWidth: 1,
                  lineColor: '#666666'
              }
          }
      },
      series: [{
          name: 'Asia',
          data: [502, 635, 809, 947, 1402, 3634, 5268]
      }, {
          name: 'Africa',
          data: [106, 107, 111, 133, 221, 767, 1766]
      }, {
          name: 'Europe',
          data: [163, 203, 276, 408, 547, 729, 628]
      }, {
          name: 'America',
          data: [18, 31, 54, 156, 339, 818, 1201]
      }, {
          name: 'Oceania',
          data: [2, 2, 2, 6, 13, 30, 46]
      }]
  });
  });
  </code></pre>