Highcharts Demo

author(s): Torstein Hønsi

by Kevin Mwangi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="vacation-time-chart" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {
    var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'vacation-time-chart',
            type: 'pie',
            //height: 250,
            //width: 250,
            borderRadius: 0
        },
        credits: {
            enabled: false
        },
        title: false,
        tooltip: false,
        plotOptions: {
            pie: {
                startAngle: 90,
                innerSize: '55%',
                size: '100%',
                dataLabels: false,
                stickyTracking: false,
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                    events: {
                        mouseOver: function () {
                            this.series.chart.innerText.attr({
                                text: this.y
                            });
                        },
                        mouseOut: function () {
                            this.series.chart.innerText.attr({
                                text: 112
                            });
                        }
                    }
                }
            }
        },

        series: [{
             name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Microsoft Internet Explorer',
                y: 56.33,
                drilldown: 'Microsoft Internet Explorer'
            }, {
                name: 'Chrome',
                y: 24.03,
                drilldown: 'Chrome'
            }, {
                name: 'Firefox',
                y: 10.38,
                drilldown: 'Firefox'
            }, {
                name: 'Safari',
                y: 4.77,
                drilldown: 'Safari'
            }, {
                name: 'Opera',
                y: 0.91,
                drilldown: 'Opera'
            }, {
               ...