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/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This bar chart compares the estimated production of corn and wheat for 2023 across six countries: 
        the USA, China, Brazil, the EU, Argentina, and India. Corn production significantly exceeds wheat production 
        in countries like the USA and Brazil, while wheat production surpasses corn in the EU. The chart uses metric tons 
        (MT) as the unit and highlights data sourced from IndexMundi.
    </p>
</figure>

CSS

#container {
    max-width: 800px;
    margin: 1em auto;
}

label, select {
    display: block;
    margin-bottom: 10px;
}

#pref-menu-dialog {
    z-index: 9999;
    background-color: white;
    padding: 20px;
    border: 1px solid black;
    border-radius: 5px;
    min-width: 320px;
}       

.pref {
    display: flex;
    align-items: center; 
    gap: 10px;
}

.pref label {
    margin-top: 10px; 
}
h3 {
    margin-bottom: 10px;
}

/* To avoid screen reader region disappearing after chart.update() */
#highcharts-screen-reader-region-before-0 > div:first-child {
    position: static !important; /* Resets to default */
    width: auto !important;      /* Makes width dynamic */
    height: auto !important;     /* Makes height dynamic */
    overflow: visible !important; /* Allows content to be visible */
    white-space: normal !important; /* Allows wrapping */
    clip: auto !important;       /* Removes clipping */
    margin-top: 0 !important;    /* Resets margin */
    opacity: 1 !important;       /* Makes fully visible */
}

JavaScript

// Storing preference states globally
let selectedVerbosity = 'default',
    selectedTextSize = 'default',
    isContrastChecked = false,
    isBorderChecked = false;

function initializeChart() {
    const chart = Highcharts.chart('container', getChartConfig());
    chart.prefMenu = {};
    addPrefButton(chart);
    addCustomA11yComponent(chart);
    addPrefButtonScreenReader(chart);
    return chart;
}

function getChartConfig() {
    return {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Corn vs wheat estimated production for 2023'
        },
        subtitle: {
            text:
                'Source: <a target="_blank" ' +
                'href="https://www.indexmundi.com/agriculture/?commodity=corn">indexmundi</a>'
        },
        xAxis: {
            categories: ['USA', 'China', 'Brazil', 'EU', 'Argentina', 'India'],
            crosshair: true,
            accessibility: {
                description: 'Countries'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '1000 metric tons (MT)'
            }
        },
        tooltip: {
            valueSuffix: ' (1000 MT)'
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [
            {
                name: 'Corn',
                data: [387749, 280000, 129000, 64300, 54000, 34300]
            },
            {
                name: 'Wheat',
                data: [45321, 140000, 10000, 140500, 19500, 113500]
            }
        ]
    };
}


function addPrefButton(chart) {
    // TODO: Fix responsiveness of button
    chart.prefMenu.prefButton = chart.renderer.button(
        '⚙️ Preferences', 650, 5, () => handlePrefButtonClick(chart)
    ).add();
}

function addPrefButtonScreenReader(chart) {
    const screenReaderDiv =
       ...