title: Highchart - show values on Chart
body: <p>I am using pie chart from <a href="http://www.highcharts.com/" rel="nofollow noreferrer">Highcharts</a> and that work fine, however I get requirement to show percentage values like shown in below image.</p>
  
  <p><a href="https://i.stack.imgur.com/PoO3Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PoO3Y.png" alt="Image"></a></p>
  
  <p>I tried to play with legand option but that didn't work.</p>
  
  <p>My settings are as below.</p>
  
  <pre><code>    $('#' + source).highcharts({
          credits: {
              enabled: false
          },
          chart: {
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false,
              type: 'pie'
          },
          title: {
              text: chartTitle
          },
          tooltip: {
              pointFormat: '{series.name}: &lt;b&gt;{point.percentage:.1f}%&lt;/b&gt;'
          },
          plotOptions: {
              pie: {
                  allowPointSelect: false,
                  cursor: 'pointer',
                  dataLabels: {
                      enabled: false,
                      format: '&lt;b&gt;{point.name}&lt;/b&gt;: {point.percentage:.1f} %',
                  },
                  style: {
                      color: (Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || 'black'
                  },
                  connectorColor: 'silver',
                  showInLegend: true
              }
          },
          legend: {
              enabled: true,
              layout: 'horizontal',
              verticalAlign: 'bottom',
              adjustChartSize: true
          },
          series: [{
              name: 'Total of ',
              colorByPoint: true,
              data: chartData
          }]
      });
  </code></pre>