Pie chart showing value in pie label - Javascript highcharts

Javascript examples for highcharts:Pie Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Pie Chart

Description

Pie chart showing value in pie label

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/modules/export-data.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    chart: {//from ww  w  .j a va  2 s  .  c om
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        width: 325,
        height: 325,
      },
    title: {
      text: '' +
      '',
      align: 'center',
      verticalAlign: 'middle',
      y: 40
    },
    tooltip: {
      enabled: false
    },
    plotOptions: {
      pie: {
        dataLabels: {
        allowOverlap:true,
          enabled: true,
          distance: -20,
          color: '#fff',
          style: {
            fontWeight: 'bold',
            fontSize: '16px',
            textOutline: 'none'
          }
        },
        borderWidth: '7px',
        borderColor: '#fff',
        size: '100%',
        startAngle: -90,
        endAngle: 360,
        center: ['50%', '50%']
      },
      series: {
        states: {
          hover: {
            //enabled: false
          }
        }
      }
    },
    series: [{
      type: 'pie',
      innerSize: '72%',
      data: [
        ["1", 14.2],
        ["2", 14.2],
        ["3", 14.2],
        ["4", 14.2],
        ["5", 14.2],
        ["6", 14.2],
        ["7", 14.2]
      ],
      zIndex: 1
    }],
    credits: {
      enabled: false
    }
});

      </script>  
   </body>
</html>

Related Tutorials