Stacked Column 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 winds 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, Wins, Nominations
-94694400000, 0, 2
-63158400000, 0, 0
-31536000000, 0, 1
0, 0, 0
31536000000, 0, 2
63072000000, 0, 1
94694400000, 0, 0
126230400000, 2, 4
157766400000, 4, 2
189302400000, 0, 0
220924800000, 4, 4
252460800000, 0, 0
283996800000, 0, 0
315532800000, 0, 0
347155200000, 0, 4
378691200000, 0, 0
410227200000, 0, 7
441763200000, 0, 0
473385600000, 0, 4
504921600000, 1, 1
536457600000, 2, 0
567993600000, 0, 2
599616000000, 0, 1
631152000000, 0, 0
662688000000, 0, 0
694224000000, 0, 3
725846400000, 0, 0
757382400000, 0, 0
788918400000, 0, 0
820454400000, 2, 0
852076800000, 0, 1
883612800000, 0, 2
915148800000, 2, 1
946684800000, 0, 0
978307200000, 0, 0
1009843200000, 0, 0
1041379200000, 1, 1
1072915200000, 0, 0
1104537600000, 0, 1
1136073600000, 2, 4
1167609600000, 1, 0
1199145600000, 0, 0
1230768000000, 0, 1
1262304000000, 0, 1
</pre>

CSS

#grammy-data {
    display: none;
}

JavaScript

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

    title: {
        text: 'Stevie Wonder Grammy Awards Wins and Nominations'
    },
    xAxis: {
        type: 'datetime',
        title: {
            text: 'Years'
        },
    },

    yAxis: {
        title: {
            text: 'Number of awards/nominations'
        },
        stackLabels: {
            enabled: true,
            formatter: function() {
                if (this.total === 0) {
                    return '';
                } else {
                		console.log(this.total)
                    return this.total;
                }
            }
        }
    },

    data: {
        csv: document.getElementById('grammy-data').innerText,
    },
    plotOptions: {
        column: {
            stacking: true
            /*dataLabels: {
                enabled: true
            }*/
        }
    },
    series: [{
        color: '#B18B0F'
    }, {
        color: '#214769'
    }]
});