JSFiddle - React, Tailwind, and code Playground

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

.highcharts-figure {
    max-width: 800px;
    margin: 1em auto;
}

#grammy-data {
    display: none;
}

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

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

.highcharts-tooltip span ul {
    padding-left: 10px;
}

.highcharts-tooltip span li {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

JavaScript

let parsedData = [];
const tooltipDivs = [];
let checkboxChecked = false;
Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            load: function () {
                const points = this.series.map(s => s.points).flat();
                points.forEach(point => {
                    const id = `tooltip-${point.series.name}-${point.index}`;
                    if (checkboxChecked) {
                        point.graphic.element.setAttribute('aria-describedby', id);
                    }

                    const column = parsedData.find(columns =>
                        columns[0].startsWith(point.x)
                    );

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

                        let tooltipText;
                        if (point.series.name === 'wins') {
                            tooltipText = createTooltipText(grammy, Highcharts.dateFormat('%Y', point.x), 'wins', point.y, songwin, awardwin);
                        }
                        if (point.series.name === 'nominations') {
                            tooltipText = createTooltipText(grammy, Highcharts.dateFormat('%Y', point.x), 'nominations', point.y, songnom, awardnom);
                        }

                        const tooltipDiv = document.createElement('div');
                        tooltipDiv.setAttribute('id', id);
                        tooltipDiv.setAttribute('aria-hidden', 'true');
                        tooltipDiv.classList.add('visually-hidden');
                        tooltipDiv.innerHTML = tooltipText;
                        document.body.appendChild(tooltipDiv);
                        tooltipDivs.push(tooltipDiv);
                    }
                });
            }
        }
    },

 ...