title: How to display pie slice data and tooltip together using chart.js
body: <p><a href="https://i.stack.imgur.com/bEsvm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bEsvm.png" alt="enter image description here"></a></p>
  
  <p>Can we display data in pie chart slice and also tolltip like the above image using chart.js?</p>
  
  <p>Updated:</p>
  
  <p>Here is my code in php page.</p>
  
  <pre><code>            printf( '&lt;table&gt;' );
              echo '&lt;tr&gt;&lt;td style="text-align: right;"&gt;&lt;canvas id="pie-canvas-'
                   . $canvasId
                   . '" width=256px height=257px &gt;&lt;/canvas&gt;&lt;/td&gt;&lt;td style="text-align: left;width:360px;" id="legend" class="chart-legend"&gt;&lt;/td&gt;&lt;/tr&gt;';
  
              echo '&lt;script type="text/javascript"&gt;drawPie('
                  . $canvasId
                  . ', '
                  . $data
                  .', '
                  . $legend
                  . ');&lt;/script&gt;';
              printf( '&lt;/table&gt;' );
  
  printf( '&lt;script type="text/javascript" src="extlib/Chart.min.js"&gt;&lt;/script&gt;' );
  printf( '&lt;script type="text/javascript" src="extlib/jquery-min.js"&gt;&lt;/script&gt;' );
  printf( '&lt;script type="text/javascript"&gt;' );
  ?&gt;
  function drawPie( canvasId, data, legend )
  {
  //pie chart for machine status
      var canvas = document.getElementById( "pie-canvas-" + canvasId );
      var ctx = canvas.getContext( "2d" );
      var midX = canvas.width/2;
      var midY = canvas.height/2;
      var piedata = [];
  
      $.each(data,function(i,val){
          piedata.push({value:val.hostStatusCount,color:val.color,label:val.status});
      });
  
      Chart.types.Pie.extend({
          name: "PieAlt",
          draw: function(){
              Chart.types.Pie.prototype.draw.apply(this, arguments);
              drawSegmentValues(this)
          }
      });
      var myPieChart = new Chart(ctx).PieAlt(piedata, {
          showTooltips: true,
          tooltipTemplate: "&lt;%= Math.round(circumference / 6.283 * 100) %&gt;%"
  
      });
  
      var radius = myPieChart.outerRadius;
  
      function drawSegmentValues(myPieChart)
      {
      //displays segements(number of machines) for each slice of pie in percentage
          var length = myPieChart.segments.length;
          var totalValue = 0;
          for ( var i=0; i &lt; length; i++ )
          {
              totalValue +=myPieChart.segments[i].value;
          }
          for( var i=0; i &lt; length; i++ )
          {
              ctx.fillStyle="black";
              var textSize = canvas.width/15;
              ctx.font= textSize+"px Verdana";
  
              // Get needed variables
              var value = Math.round( ( ( myPieChart.segments[i].value ) / totalValue ) * 100 );
              var startAngle = myPieChart.segments[i].startAngle;
              var endAngle = myPieChart.segments[i].endAngle;
              var middleAngle = startAngle + ( ( endAngle - startAngle ) / 2 );
  
              // Compute text location
              var posX = ( radius /1.5 ) * Math.cos( middleAngle ) + midX;
              var posY = ( radius/1.5 ) * Math.sin( middleAngle ) + midY;
  
              // Text offside by middle
              var w_offset = ctx.measureText( value ).width / 2;
              var h_offset = textSize / 4;
  
              ctx.fillText( value+"%", posX - w_offset, posY + h_offset );
          }
      }
  
      //legend for status
      if( legend )
          document.getElementById("legend").innerHTML = myPieChart.generateLegend();
  }
  &lt;?
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/OdNDv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OdNDv.png" alt="enter image description here"></a></p>
  
  <p>When mouse over the data in pie slice moved from its position.
  How to solve this?</p>