Negative PieChart

by chridam

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 900"></div>

JavaScript

var chart;
chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         margin: [50, 200, 60, 170]
      },
      title: {
         text: 'Browser market shares at a specific website, 2010'
      },
      plotArea: {
         shadow: null,
         borderWidth: null,
         backgroundColor: null
      },
      tooltip: {
         formatter: function() {
             var val = this.point.positive ? this.y : this.y * (-1);
            return '<b>'+ this.point.name +'</b>: '+ val +' %';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: true,
               formatter: function() {
                   return this.point.positive ? this.y : this.y * (-1);
               },
               color: 'black',
               style: {
                  font: '13px Trebuchet MS, Verdana, sans-serif'
               }
            }
         }
      },
      legend: {
         layout: 'vertical',
         style: {
            left: 'auto',
            bottom: 'auto',
            right: '50px',
            top: '100px'
         }
      },
       series: [{
         type: 'pie',
         name: 'Browser share',
         data: [
             {name:'Safari',y:20,positive:true},
             {name:'Others',y:50,positive:true},
             {name:'Opera',y:30,positive:false}
         ]
         
      }]
   });