title: how to show data label on mouse over in highcharts?
body: <p>could you please tell me how to show data label on mouse over in highcharts .?Actually  I want to display data label on selected item and hide other data labels
  .
  In other words if I mouse over any slice it show it data label and hide other data lables </p>
  
  <p>here is my code
  <a href="http://jsfiddle.net/nyhmdtb8/9/" rel="nofollow noreferrer">http://jsfiddle.net/nyhmdtb8/9/</a></p>
  
  <pre><code>$(function() {
  var colors= [
                   '#0066FF', 
                   '#33CC33', 
                   '#FF0000',
                   '#FFFF00',
              ];
    $('#container').highcharts({
      chart: {
        type: 'pie'
      },
  
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      legend: {
  
        symbolHeight: 1,
        symbolWidth: 1,
        symbolRadius: 0,
        useHTML: true,
        align: 'right',
        verticalAlign: 'top',
        itemWidth: 100,
        layout: 'vertical',
        x: 0,
        y: 100,
        labelFormatter: function() {
  
          return '&lt;div style="padding:5px;width:55px;background-color:' + this.color + '"&gt;&lt;span style="color: #ffffff;"&gt;' + this.name + ': &lt;b&gt;' + this.y + '&lt;/b&gt; &lt;/span&gt;&lt;/div&gt; &lt;/n&gt;';
        }
      },
      yAxis: {
        title: {
          text: 'Total percent market share'
        }
      },
                    plotOptions: {
  
                        pie: {
                    showInLegend: true,
                           dataLabels: {
                          format: '&lt;b&gt;{point.y}&lt;/b&gt;',
  
                          style: {
                              fontWeight: 'bold',
                              color: 'white'
                          }
                      },
              point: {
                  events: {
                      legendItemClick: function () {
                      return false;
                      },
                      mouseOver: function(e) {
                   var series = this.series;
                  console.log(series)
                 for (var i = 0; i &lt; series.data.length; i++) {
                  var point = series.data[i];
                  console.log(point)
                  if (point == this) {
                      console.log('yes')
                       point.update({color: series.chart.options.colors[this.index]});
                  } else {
                      point.update({
                          color: '#CCCCCC'
                      });
                  }
              }
  
              return false;
          },
                  mouseOut: function(e) {
                   var series = this.series;
                  console.log(series)
                 for (var i = 0; i &lt; series.data.length; i++) {
                  var point = series.data[i];
                 point.update({color: series.chart.options.colors[i]});
  
              }
  
              return false;
          }
  
                  }
                },
                     startAngle: 0,
                    endAngle: 270,
              }
              },
      tooltip: {
        enabled: false,
        shadow: false
      },
      series: [{
        states: {
          hover: {
            enabled: false
          }
        },
        showInLegend: false,
        name: 'election result',
        enabled: true,
        dataLabels: {
          enabled: true
        },
        data: [
          ['A', 55],
          ['B', 65],
  
        ],
        size: '30%',
        innerSize: '70%',
      }, {
        states: {
          hover: {
            enabled: false
          }
        },
        name: 'Versions',
        data: [
          ['sdsd', 55],
          ['sdf', 65],
          ['sdf', 65],
          ['sdf', 132],
  
        ],
        size: '70%',
        innerSize: '80%',
  
      }]
    },function(chart){
                        $(chart.series[1].data).each(function(i, serie) {
              $(serie.legendItem.element).hover(function() {
              //  alert('--dd--')
               mouseOverEvent(chart.series[1].data, serie.index, true);
              }, function() {
                 alert('----');
                 mouseOutEvent(chart.series[1].data, serie.index);
             });
         });
              function mouseOverEvent(series, index, hide) {
                 for (var i = 0; i &lt; series.length; i++) {
                  if (index == i) {
                       series[i].update({color: colors[i]});
                  } else {
                      series[i].update({
                          color: '#CCCCCC'
                      });
                  }
              }
  
              }
                        function mouseOutEvent(series, index, hide) {
                 for (var i = 0; i &lt; series.length; i++) {
                       series[i].update({color:colors[i]});
              }
  
              }
    });
  
  });
  </code></pre>
  
  <p><strong>example if I mouse over blue slice .it show only 55 data label and rest will be hide and when i mouse out all label again display</strong> </p>