title: event handler on center of doughnut chart using chart.js
body: <p>I have created 4 doughnut chart on a page which has some text in the center,I know this can be done by placing a DIV over the center but I cant use that as the text doesn't get exported when the chart is <strong>downloaded as PNG</strong> :</p>
  
  <p>Demo:<a href="https://jsfiddle.net/cmyker/ooxdL2vj/" rel="noreferrer">https://jsfiddle.net/cmyker/ooxdL2vj/</a></p>
  
  <p>I need to track the click of the center text for this I tried using the pageX,pageY to determine if the click is made on the center section.</p>
  
  <p>The coordinates are of the corners of the rectangular section which is inside the central hole of the doughnut chart &amp; is likely to have the text within. </p>
  
  <pre><code>jQuery('#canvas').on('click',function(e){
    var pageX = e.pageX;                                  
    var pageY = e.pageY;
        if((pageY &gt;= 379 &amp;&amp; pageY &lt;= 571) &amp;&amp; (pageX &gt;= 440 &amp;&amp; pageX &lt;= 629)){   //coordinates are of rectangular area which has text inside the center of doughnut chart.
               //do something                                          
        }
  });
  </code></pre>
  
  <p>but this wont work if the resolution of the screen is different as the coordinates will vary.</p>
  
  <p>Any Ideas please?</p>
  
  <p>I tried to use raphael.js to make the center clickable but not very sure of this attempt.
  I am trying to use the <code>container</code> approach to create a circle in the center hole of donuts on which a click handler could be attached.</p>
  
  <p>Code info using <strong>Raphael JS</strong></p>
  
  <pre><code>Chart.pluginService.register({
                    beforeDraw: function(chart) {
                    if(chart['data']['midNum']){
                        var width = chart.chart.width,
                            height = chart.chart.height,
                            ctx = chart.chart.ctx;
  
                        ctx.restore();
                        var fontSize = (height / 114).toFixed(2);
                        ctx.font = fontSize + "em sans-serif";
                        ctx.textBaseline = "middle";
  
                        var text = chart['data']['midNum'],
                            textX = Math.round((width - ctx.measureText(text).width) / 2),
                            textY = height / 2.5;
                          var chartID = chart['chart']['canvas']['id']; //the ID of element on which this donut was created
  
                          var paper  = Raphael(chartID,textX,textY); //trying to use the container approach
                          var circle = paper.circle(textX, textY, 10);
                              circle.attr("fill", "#f00");
                        //ctx.clearRect(0,0,width,height);
                        //ctx.fillText(text, textX, textY);
                        //ctx.save();
                      }
                    }
                  })
  </code></pre>