Highcharts Demo

author(s): Torstein Hønsi

by suphalak_26

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500"></div>

JavaScript

Highcharts.chart('container', {
		chart: { 
				        type: 'pie' 
		},
   title: { 
				        text: '' 
		}, 
      plotOptions: {  
				        pie: { 
				            dataLabels: {  
				                distance: -30, 
                        color: '#000000',  
				            	 	style: { fontFamily: 'Verdana, sans-serif', 					                    fontSize: '9px' },  
				                formatter: function() { 
				                               return  Highcharts.numberFormat(this.point.positive ? this.y : this.y * (-1),2)+'%';  
				                            } 
				            }, 
				             showInLegend: true, 
				             borderWidth: 0 
				        }  
				    },legend: {  
				            layout: 'vertical',  
				            align: 'right',  
				            floating: true,  
				            verticalAlign: 'middle',  
				            symbolHeight:10,  
				            symbolRadius: 0, 
				 			 itemStyle: {fontSize:'9px',font: 'Verdana, sans-serif',color: '#000000'} 
				        },
		
		series: [{  
				        data: [  
				            {  
				               name:'BANK', 
				               y:16.06,  
				               color : '#224184',  
				               positive : true  
				            },  
				            { 
				               name:'COMM', 
				               y:10.97,  
				               color : '#522159',  
				               positive : true  
				            }, 
				            { 
				               name:'CONMAT',  
				               y:3.98,  
				               color : '#EAA0C5',  
				               positive : true  
				            },  
				            {  
				               name:'CONS',  
				               y:3.97,  
				               color : '#EDD0A8',  
				               positive : true 
				            },  
				            {  
				               name:'ENERG',  
				               y:12.51,  
				               color : '#E62128',  
				               positive : true            
				            },  
				           ...