title: High Charts, pie chart customaization
body: <p>i have to do some customization like :
  1. remove hand pointer on mouse over the pie slices.
  2. display the label inside the large/big slice.
  3. on mouseover/mouseout high light the respective div.</p>
  
  <p>Reference img:
  <img src="https://i.stack.imgur.com/rSdl9.png" alt="enter image description here">
  Here is the jsfiddle, which i have worked to implement the 3 point:
  on mouse over i could highlight the selected, but on mouse out not able to remove the color</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="grid_5"&gt;
  &lt;div class="grid_4" id="top_states_chart" style="min-width: 200px; height: 200px; margin: 0 auto"&gt;&lt;/div&gt;
  &lt;div class="grid_4 right"&gt;
      &lt;div class="Others level1"&gt;Maharastra&lt;/div&gt;
      &lt;div class="Firefox level2"&gt;Karnataka&lt;/div&gt;
      &lt;div class="level3"&gt;Gujarat&lt;/div&gt;
      &lt;div class="level4"&gt;Tamil Nadu&lt;/div&gt;
      &lt;div class="level5"&gt;Madhya Pradesh&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQquery</strong> </p>
  
  <pre><code>$(function () {
      var chart;
      Highcharts.setOptions({
          colors: ['#fffccc', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
         });
      $(document).ready(function () {
  
          // Build the chart
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'top_states_chart',
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  plotShadow: false
              },
              title: {
                  text: ''
              },
              tooltip: {
                  //pointFormat: '',//{series.name}: &lt;b&gt;{point.percentage}%&lt;/b&gt;
                  //percentageDecimals: 1
                  formatter: function() {
                      return false;
                  }
              },
              plotOptions: {
                  pie: {
                      allowPointSelect: false,
                      cursor: 'pointer',
                      dataLabels: {
                          enabled: false
                      },
                      showInLegend: false,
                      point: {
                          events: {
                              mouseOver: function(event) {
                                  var point = this;
  
  
                                  $('div.'+point.name).css({'background-color':'green', 'cursor':'pointer'});
                               }
                          }
                      },
                      events: {
                          mouseOut: function() {
                              //pieChart.tooltip.hide();
                              var point = this;
  
                              $('div.'+point.name).css({'background-color':'none', 'cursor':'pointer'});
                          }
                      }
                  }
              },
              series: [{
                  type: 'pie',
  
                  data: [
                      ['Firefox',   45.0],
                      ['Others',   55.7]
                  ]
              }]
          });
      });
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/XErNG/135/" rel="nofollow noreferrer">http://jsfiddle.net/XErNG/135/</a></p>
  
  <p>please have a look at this js code.</p>
  
  <p>Thanks </p>