Highcharts Demo

author(s): Torstein Hønsi

by HemalathaThanigaivel

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px; min-width: 320px; max-width: 500px"></div>

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'pie',
        borderWidth: 2
    },

    title: {
        text: 'Legend navigation demo'
    },

    credits: {
        enabled: false
    },

    legend: {
        layout: 'horizontal',
        align: 'bottom',
        //verticalAlign: 'middle',
        x: 0,
        y: 50,
        navigation: {
            activeColor: '#3E576F',
            animation: true,
            arrowSize: 12,
            inactiveColor: '#CCC',
            style: {
                fontWeight: 'bold',
                color: '#333',
                fontSize: '12px'
            }
        }
    },

    series: [{
        data: (function () {
            var names = 'Ari,Bjartur,Bogi,Bragi,Dánjal,Dávur,Eli,Emil,Fróði,Hákun,Hanus,Hjalti,Ísakur,' +
                'Johan,Jóhan,Julian,Kristian,Leon,Levi,Magnus,Martin,Mattias,Mikkjal,Nóa,Óli,Pauli,Petur,Rói,Sveinur,Teitur',
                arr = [];

            Highcharts.each(names.split(','), function (name) {
                arr.push({
                    name: name,
                    y: Math.round(Math.random() * 100)
                });
            });

            return arr;
        }()),
        showInLegend: true
    }]

});