Highcharts Demo

author(s): Torstein Hønsi

by oysteinmoseng

HTML

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

<div id="container"></div>

CSS

@import url("https://code.highcharts.com/css/highcharts.css");

#container {
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
}

.highcharts-legend text {
    text-shadow: 0 0 2px black, 0 0 2px black;
}

.highcharts-legend-box {
    fill: black;
    fill-opacity: 0.7;
    stroke: black;
    stroke-width: 1px;
}

.highcharts-legend-item text {
    fill: #e0e0e0;
    transition: fill 250ms;
}

.highcharts-legend-item:hover text {
    fill: #ff0000 !important;
    color: #ff0000;
}

.highcharts-legend-item-hidden * {
    fill: gray !important;
    stroke: gray !important;
}

.highcharts-legend-title {
    fill: white;
    font-style: italic;
}

.highcharts-legend-navigation {
    fill: white;
}

.highcharts-legend-nav-active {
    fill: white;
}

.highcharts-legend-nav-inactive {
    fill: gray;
}

JavaScript

Highcharts.chart('container', {

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

    title: {
        text: 'Legend styled by CSS'
    },

    credits: {
        enabled: false
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        y: 30,
        title: {
            text: 'Male name'
        }
    },

    series: [{
        data: (function () {
            const 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 = [];

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

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

});