title: create an interactive table while rotating the piechart
body: <p>All, Recently I had posted a question <a href="https://stackoverflow.com/questions/21141152/rotating-a-donut-chart-in-javascript-after-it-is-rendered">Rotating a donut chart in javascript after it is rendered</a> that was answered and am currently using it in my app. But now we need to take this one step further and hook this donut spinning chart (high chart) to update/highlight the corresponding row on a table. Basically here's the layout. We have a donut chart on top that can spin (right now it spins in clockwise, ideally, it should spin in both directions) and a table at the bottom which is basically the data displayed on the donut. So now when the user rotates the donut the bottom piece of the donut should correspond and highlight the appropriate row in the table below. So potentially, if the bottom of the donut says IE7, then the row IE7 should get highlighted and so on. </p>
  
  <p>I have a sample fiddle created here <a href="http://jsfiddle.net/skumar2013/hV9aw/1/" rel="nofollow noreferrer">http://jsfiddle.net/skumar2013/hV9aw/1/</a> for reference. Can somebody share some ideas/samples on how to go about doing this? As always thanks for your help in advance.</p>
  
  <pre><code>$(function () {
      $('#mouseMoveDiv').mousemove(function () {
          var theChart = $('#container').highcharts();
          var currStartAngle = theChart.series[0].options.startAngle;
          console.log('currStartAngle: ' + currStartAngle);
          var newStartAngle = currStartAngle + 5;
          if (newStartAngle &gt; 359) {
              newStartAngle = 5;
          }
          console.log(newStartAngle);
          theChart.series[0].update({
              startAngle: newStartAngle
          });
      });
  
      var chart = new Highcharts.Chart({
          chart: {
              spacingTop: 50,
              spacingBottom: 50,
              spacingLeft: 50,
              spacingRight: 50,
              height: 500,
              width: 500,
              renderTo: 'container',
              type: 'pie'
          },
  
          title: {
              text: 'Interactive Pie Chart'
          },
  
          plotOptions: {
              pie: {
                  center: ["50%", "50%"],
                  startAngle: 90,
                  animation: false,
                  innerSize: '30%'
              }
          },
  
          series: [{
              data: [
                  ['Firefox', 44.2],
                  ['IE7', 26.6],
                  ['IE6', 20],
                  ['Chrome', 3.1],
                  ['Other', 5.4]
              ]
          }]
      });
  });
  
      &lt;Title&gt;Interactive pie/donut chart&lt;/Title&gt;
      &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
      &lt;div id="mouseMoveDiv"&gt;
      &lt;div id="container" style="height: 500px; width: 500px"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;table border='1' width='100%'&gt;
      &lt;tr&gt;
          &lt;td&gt;Firefox&lt;/td&gt;
          &lt;td&gt;44.2%&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;IE7&lt;/td&gt;
          &lt;td&gt;26.6%&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;IE6&lt;/td&gt;
          &lt;td&gt;20%&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Chrome&lt;/td&gt;
          &lt;td&gt;3.1%&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Other&lt;/td&gt;
          &lt;td&gt;5.4%&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>