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>
<div id="container"></div>

CSS

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

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

JavaScript

const chart = Highcharts.chart('container', {
    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]
        }
    ]
});

// Icon: <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Iconoir_accessibility.svg" alt="">

// A11y menu - button
const prefBtn = document.createElement('button');
prefBtn.innerHTML = 'Preferences menu';
prefBtn.setAttribute('aria-label', 'Preferences menu');
prefBtn.className = 'help-button';


// A11y menu - content
const prefContent = document.createElement('dialog'),
    closeID = 'hc-dlg-close-btn' + chart.index;

prefContent.innerHTML = `
    <button id="${closeID}" class="dlg-close">Close</button>
    <h2>Preferences</h2>
    <label for="theme">Theme:</label>
    <select id="theme">
        <option value="light">Light</option>
        <option value="dark">Dark</option>
    </select>
    <label for="text-size>">Text size:</label>
    <select id="text-size">
        <option value="normal">Normal</option>
        <option value="large">Large</option>
    </select>
    `;

prefContent.addEventListener('close', ()...