Highcharts Demo

by jpeter06

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                reflow:false
            },legend: {
            enabled: false
        	},
            title: {
                text: ''
            },
            tooltip: {enabled: true
            },
            plotOptions: {
                pie: {
                		showInLegend: true,
                    allowPointSelect: true,
                    cursor: 'pointer',
                    center: ['50%','50%'],
                    dataLabels: {
                        enabled: false
                    },
                    events:{
                    	click: function(a) {return false;}
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['renovables',   40],
                    ['no renovables', 60]          
                ],
                innerSize: "65%",
                outerSize: "75%"
            },{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['carbón',   25],
                    ['diésel',       25],
                    ['gas', 10],       
                    ['ciclo comb.',    40] 
                ],
                innerSize: "75%",
                outerSize: "85%"
            },{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Enlace',   10],
                    {
                        name: 'Generación',
                        y: 90,
                        color: 'white'
                    }
                ],
                innerSize: "92%",
                outerSize: "100%"
            }]
        });
    });