title: Click on label - Pie chart jQuery Flot
body: <p>I'm using jQuery flot pie chart, I used embedded labels in interactive pie chart. When I click on one of the sectors in pie chart it shows alert but when I click on label that is embedded in the sector it doesn't respond to the click action. Is there is any solution for this?</p>
  
  <p>My source code</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://static.pureexample.com/js/flot/excanvas.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://static.pureexample.com/js/flot/jquery.flot.pie.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- CSS --&gt;
  &lt;style type="text/css"&gt;
  #flotcontainer {
      width: 600px;
      height: 400px;
      text-align: left;
  }
  &lt;/style&gt;
  
  &lt;!-- Javascript --&gt;
  &lt;script type="text/javascript"&gt;
  $(function () { 
      var data = [
          {label: "data1", data:10},
          {label: "data2", data: 20},
          {label: "data3", data: 30},
          {label: "data4", data: 40},
          {label: "data5", data: 50},
          {label: "data6", data: 60},
          {label: "data7", data: 70}
      ];
  
      var options = {
              series: {
                  pie: {
                      show: true,
                      radius: 1,
                      tilt: 0.5,
                      label:{                        
                          radius: 3/4,
                          formatter: function (label, series) {
                              return '&lt;div style="border:1px solid gray;font-size:8pt;text-align:center;padding:5px;color:white;"&gt;' + label + '&lt;br/&gt;' +   
                              Math.round(series.percent) + '%&lt;/div&gt;';
                          },
                          background: {
                              opacity: 0.5,
                              color: '#000'
                          }
                      }
                  }
              },
              legend: {
                  show: false
              },
              grid: {
                  hoverable: true,
                  clickable: true
              }
           };
  
      $.plot($("#flotcontainer"), data, options);  
  
      $("#flotcontainer").bind("plothover", function(event, pos, obj){
          if (!obj){return;}
          percent = parseFloat(obj.series.percent).toFixed(2);
  
          var html = [];
          html.push("&lt;div style=\"flot:left;width:105px;height:20px;text-align:center;border:1px solid black;background-color:", obj.series.color, "\"&gt;",
                    "&lt;span style=\"font-weight:bold;color:white\"&gt;", obj.series.label, " (", percent, "%)&lt;/span&gt;",
                    "&lt;/div&gt;");
  
          $("#showInteractive").html(html.join(''));        
      });
     $("#flotcontainer").bind("plotclick", function(event, pos, obj){
          if (!obj){return;}
          percent = parseFloat(obj.series.percent).toFixed(2);
          alert(obj.series.label + " ("+ percent+ "%)");
  
      });
  
  
  });
  &lt;/script&gt;
  
  &lt;!-- HTML --&gt;
  &lt;div&gt;
      Hover percent : &lt;span id="showInteractive"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="flotcontainer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>If you want to try it, you can use this editor</p>
  
  <p><a href="http://plnkr.co/edit/LvUuMYIYUAi3RZRYGSjV?p=preview" rel="nofollow">http://plnkr.co/edit/LvUuMYIYUAi3RZRYGSjV?p=preview</a></p>