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>
<script src="https://code.highcharts.com/modules/pattern-fill.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

/*@import url("https://code.highcharts.com/css/highcharts.css");*/

/* :root {
    --highcharts-color-0: hotpink;
    --highcharts-color-1: yellow;

} */

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

#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;
}

h3 {
    margin-bottom: 10px;
}

/* To avoid screen reader region disappearing after chart.update() */
.hide-section {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    clip: auto !important;
    margin-top: 0 !important;
    opacity: 1 !important;
}

.highcharts-button-normal:hover,
.highcharts-button-normal-hover {
    cursor: pointer;
}

#small-font {
    font-size: 10px !important;
}

#default-font {
    font-size: 16px !important;
}

#large-font {
    font-size: 22px !important;
}

.alt-text-div {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 4px;
    font-size: 12px;
    transform: translate(-50%, -100%);
    pointer-events: none;
}

#hc-pref-button-fallback text {
    font-size: 1.2em !important;
}

#hc-pref-button-fallback rect {
    fill: rgb(255, 255, 255) !important;
    stroke: rgb(255, 255, 255) !important;
}

.hc-pref-button-bg {
    fill: transparent;
    transition: fill 0.2s ease;
    pointer-events: all;
}

.hc-pref-button:hover .hc-pref-button-bg {
    fill: rgb(211, 211, 211) !important;
}

.alt-text-div {
    max-width: 50px;
    border: 1px solid black;
    border-radius: 2px;
}

JavaScript

// Creating patterns for normal and contrast colors
const defaultColors = ['#90D2FE', '#CBC9E3'],
    contrastColors = ['#247eb3', '#6d6aaf'],
    borderColors = contrastColors,
    borderColorsWithContrast = ['#103042', '#272541'];

// Defining description formats for verbosity
const shortPointDescriptionFormat =
    '{point.category}, {(point.y):,.0f} (1000 MT).';
const fullPointDescriptionFormat =  'Bar {add index 1} of ' +
    '{point.series.points.length} in series {point.category}, ' +
    '{point.series.name}: {(point.y):,.0f} (1000 MT).';

let longDesc = '';
let shortDesc = '';


// Storing preference states globally
let selectedVerbosity = 'full',
    selectedTextSize = 'default',
    selectedTheme = 'default',
    isContrastChecked = false,
    isBorderChecked = false,
    isAltPointChecked = false,
    isInfoChecked = false,
    isPatternChecked = false,
    fontSize = '';

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

    // Storing descriptions
    const screenReaderDiv = document
        .getElementById('highcharts-screen-reader-region-before-0');
    const innerScreenReaderDiv = screenReaderDiv.children[0];
    longDesc = innerScreenReaderDiv.children[3].textContent;
    shortDesc = longDesc.split('. ')[0] + '.';

    return chart;
}

function getChartConfig() {
    return {
        chart: {
            type: 'column',
        },
        exporting: {
            buttons: {
                contextButton: {
                    menuItems: [
                        'printChart',
                        'downloadPNG',
                        'downloadJPEG',
                        'downloadPDF',
                        'downloadSVG'
                    ]
                }
            }
        },
        accessibility: {
            screenReaderSection:...