Stacked Column Chart

With Stevie Wonder Grammy Awards and nominations

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/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 detailed look at his recognition within the Grammy Awards from 1967 to 2010.</p>
</figure>

<pre id="grammy-data">
year,  wins,  nominations, grammy, songwin, songnom, awardwin, awardnom
-94694400000, 0, 2, 9th, None, Uptight;Uptight, None, Best Rhythm & Blues Recording;Best Rhythm & Blues Solo Vocal Performance
-63158400000, 0, 0, 10th, None, None, None, None
-31536000000, 0, 1, 11th, None, For Once In My Life, None, Best Rhythm & Blues Recording
0, 0, 0, 12th, None, None, None, None
31536000000, 0, 2, 13th, None, Signed Sealed Delivered;Signed Sealed Delivered, None, Best Male R&B Vocal Performance;Best Rhythm & Blues Song
63072000000, 0, 1, 14th, None, We Can Work It Out, None, Best Male R&B Vocal Performance
94694400000, 0, 0, 15th, None, None, None, None
126230400000, 4, 2, 16th, Superstition;Superstition;You Are the Sunshine of My Life;Innervisions, You Are the Sunshine of My Life;You Are the Sunshine of My Life, Best Rhythm & Blues Song;Best Male R&B Vocal Performance;Best MalePop Vocal Performance;Album of the Year, Song Of The Year;Record Of The Year
157766400000, 4, 2, 17th, Living for the City;Boogie On Reggae Woman;Fulfillingness' First Finale;Fulfillingness' First Finale, Tell Me Something Good;Best Producer Of The Year, Best Rhythm & Blues Song;Best Male R&B Vocal Performance;Best Male Pop Vocal Performance;Album of the Year, Best Rhythm & Blues Song;Best Producer Of The Year
189302400000, 0,...

CSS

#grammy-data {
    display: none;
}

.tooltip-heading {
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
}

.win-nom {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    padding: 5px;
}

JavaScript

let parsedData = [];
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },

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

    yAxis: {
        title: {
            text: 'Number of awards/nominations'
        },
        stackLabels: {
            enabled: true,
            formatter: function () {
                if (this.total === 0) {
                    return '';
                }
                return this.total;
            }
        }
    },
    data: {
        csv: document.getElementById('grammy-data').innerText,
        beforeParse: function (csv) {
            parsedData = csv.split('\n').map(line => line.split(','));
            return parsedData.map(columns => columns.slice(0, 3).join(',')).join('\n');
        }
    },
    tooltip: {
        useHTML: true,
        formatter: function () {
            const year = Highcharts.dateFormat('%Y', this.x);
            const column = parsedData.find(columns =>
                columns[0].startsWith(this.point.x)
            );

            if (column) {
                const grammy = column[3],
                    songwin = column[4],
                    songnom = column[5],
                    awardwin = column[6],
                    awardnom = column[7];

                if (this.series.name === 'wins') {
                    return createTooltipText(grammy, year, 'wins', this.y, songwin, awardwin);
                }
                if (this.series.name === 'nominations') {
                    return createTooltipText(grammy, year, 'nominations', this.y, songnom, awardnom);
                }
            }
            return '';
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: [{
        color: '#B18B0F'
    }, {
        color: '#214769'
    }]
});

function createTooltipText(
   ...