Stacked Bar Chart

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">This chart visualizes Stevie Wonder's Grammy Awards wins and nominations over the years. It provides a detaild look at his recognition within the Grammy Awards from 1967 to 2010.</p>
</figure>

<pre id="grammy-data">
Year, Grammy, Wins, Nomination
1967, 9th, 0, 2
1969, 11th, 0, 1
1971, 13th, 0, 2
1972, 14th, 0, 1
1974, 16th, 2, 4
1975, 17th, 4, 2
1977, 19th, 4, 4
1981, 23rd, 0, 4
1983, 25th, 0, 7
1985, 27th, 0, 4
1986, 28th, 1, 1
1987, 29th, 2, 0
1988, 30th, 0, 2
1989, 31st, 0, 1
1992, 34th, 0, 3
1996, 38th, 2, 0
1997, 39th, 0, 1
1998, 40th, 0, 2
1999, 41st, 2, 1
2003, 45th, 1, 1
2005, 47th, 0, 1
2006, 48th, 2, 4
2007, 49th, 1, 0
2009, 51st, 0, 1
2010, 52nd, 0, 1
</pre>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },

    title: {
        text: 'Stevie Wonder Grammy Awards Wins and Nominations'
    },
    xAxis: {
        type: 'category',
        title: {
            text: 'Years'
        },
        accessibility: {
            rangeDescription: 'Data ranges from 1967 to 2010.'
        }
    },

    accessibility: {
        point: {
            descriptionFormatter: function (point) {
                if (point.series.name === 'Wins') {
                    //console.log(point);
                    return 'Number of wins: ' + point.value;
                }
                return 'Number of nominations: ' + point.value;
            }
        }
    },

    yAxis: {
        title: {
            text: 'Number of awards/nominations'
        },
        stackLabels: {
            enabled: true
        }
    },
    /*tooltip: {
        headerFormat: '{point.key}</br>'
    },*/

    data: {
        csv: document.getElementById('grammy-data').innerText,
        seriesMapping: [{
            wins: 0,
            nominations: 0
        }]
        /*seriesMapping: [{
            x: 0,
            y: 1
        }, {
            x: 0,
            y: 2
        }]*/
    },
    plotOptions: {
        column: {
            stacking: true
            /*dataLabels: {
                enabled: true
            }*/
        }
    },
    series: [{
        name: 'Wins',
        color: '#B18B0F'
    }, {
        name: 'Nominations',
        color: '#214769'
    }]
});