Highcharts Demo

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<button id="updateLegend">Remove Legend</button>
<div id="legendMessage"></div>

JavaScript

$(function () {
    $('#container').highcharts({

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

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

        credits: {
            enabled: false
        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            y: 30,
            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
        }]

    }, function (chart) {

        $('#updateLegend').click(function (e) {
            var group = chart.legend.group;

            if (group.visibleTranslateY === undefined) {
                group.visibleTranslateY = group.attr('translateY');
                group.attr('translateY', -9999);
                
            } else {
                group.attr('translateY', group.visibleTranslateY);
                delete group.visibleTranslateY;
            }
        });
    });
});