Donut Chart

Pet Preference by Breeds

by Emre Bolat

HTML

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

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

JavaScript

$(function () {

    var colors = Highcharts.getOptions().colors,
        categories = ['Cats', 'Dogs', 'Bunnies', 'Fish', 'Hamsters', 'Ferrets'],
        data = [{
            y: 39.38,
            color: colors[0],
            drilldown: {
                name: 'Cat Breeds',
                categories: ['Persian', 'Siamese', 'Ragdoll', 'American Shorthair', 'Oriental', 'Maine Coon'],
                data: [1.18, 15.5, 8.15, 3.73, 4.22, 7.05],
                color: colors[0]
            }
        }, {
            y: 35.12,
            color: colors[1],
            drilldown: {
                name: 'Dog Breeds',
                categories: ['Retriever', 'German Shepherd', 'Bulldog', 'Beagle', 'Rottweiler', 'Yorkshire Terrier', 'Doberman'],
                data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
                color: colors[1]
            }
        }, {
            y: 15.02,
            color: colors[2],
            drilldown: {
                name: 'Bunnies',
                categories: ['Mini Rex', 'Holland Lop', 'Mini Lop', 'Jersey Wooly', 'Florida White',
                    'Himalayan', 'Harlequin'
                    ],
                data: [2.02, 4.73, 1.88, 1.27, 1.93, 2.07, 1.12],
                color: colors[2]
            }
        }, {
            y: 5.33,
            color: colors[3],
            drilldown: {
                name: 'Fish',
                categories: ['Betta', 'Goldfish', 'Achilles', 'Molly', 'Afra Cichlid', 'Oranda', 'Oscar'],
                data: [0.84, 1.33, 0.66, 0.57, 0.93, 0.39, 0.61],
                color: colors[3]
            }
        }, {
            y: 3.29,
            color: colors[4],
            drilldown: {
                name: 'Hamsters',
                categories: ['Syrian', 'Dwarf Campbell', 'Winter White', 'Chinese'],
                data: [0.34, 0.17, 0.24, 0.16],
                color: colors[4]
            }
        }, {
            y: 1.83,
            color: colors[5],
           ...