Pie chart export - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

Pie chart export

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script> 
      <script type="text/javascript">
    $(function(){//from ww  w.  j  a v  a2  s.co  m
$('#container').highcharts({
    chart: {
        backgroundColor: null,
        type: 'pie',
        height: 400
    },
    colors: ["#40C6A8", "#F0771A", "#67A1C6", "#dec331", "0667B4", "#ff0066", "#eeaaee",
             "#55BF3B", "#DF5353", "#52bc48", "#aaeeee"],
    title: {
        text: ''
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: 'black',
                style: { fontSize: '8px', textShadow: false },
                formatter: function () {
                    return this.key + '<br> ' + Math.round(this.percentage * 10) / 10 + '%';
                }
            },
            pointWidth: 30,
            cursor: 'pointer'
        }, pie: {
            showInLegend: true,
            dataLabels: {
                style: {
                    cursor: 'pointer'
                }
            }
        }
    },
    legend: {
        symbolWidth: 8,
        symbolHeight: 8,
        padding: 0,
        margin: 10,
        symbolPadding: 2,
        itemDistance: 5,
        itemStyle: { "fontSize": "12px", "fontWeight": "normal" }
    },
    series:
    [{
        name: 'Categories',
        data: [{ y: 22, id: '1', name: 'Category 1' },{ y: 54, id: '2', name: 'Category 2' },{ y: 464, id: '3', name: 'Category 3' }]
    }]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials